Override Readonly/Disable Styling/CSS

Question

What is the right/best way to override the material design styling when disabling input fields?

Out of box

I was able to achieve my goal w/ the following css but is that a valid way? Seems like I'm messing with the internals of Angular Material. Is there a better way?

// override material design input field styling for readonly mode
.mat-form-field-disabled .mat-form-field-underline {
    height: 0;
}

.mat-input-element:disabled {
    color: $header-text-color;
}

score 8 · Accepted Answer · edited May 11 '18 at 13:23

Yes, this way is correct, you can just add custom CSS rules to any element from mat-input with disabled class or something similar.

But you should know, when, to what elements and which classes Angular Material applies (in your case, for disabled inputs). With this knowledge, you can easily achieve your goals.

And looks like you will need ::ng-deep and !important sometimes. Another thing I can suggest is to narrow the circle of target elements, to exclude affecting other elements, which you don't want to affect.

score 6 · Answer 2 · answered May 11 '18 at 15:51

6

It looks like you want read-only. Read-only and disabled are two different things. If you want read-only, use <input readonly="true">.

answered May 11 '18 at 15:51

G. Tranter

15,102
1
39
58

Thanks, it helped me a lot. – Furqan S. Mahmoud Sep 24 '18 at 12:18

score 0 · Answer 3 · answered Feb 23 '21 at 23:15

I gave my form field a new class, mat-form-field-readonly.

<mat-form-field appearance="outline" class="mat-form-field-readonly">
    <mat-label class="control-label text-dark">Name</mat-label>
    <input matInput type="text" formControlName="name" [readonly]="true"/>
</mat-form-field>

Within the myform.component.scss file

::ng-deep .mat-form-field-readonly {
  .mat-form-field-wrapper {
    .mat-form-field-flex {
      .mat-form-field-outline {
        .mat-form-field-outline-start {
          background-color: rgba(127, 127, 127, 0.25) !important;
        }

        .mat-form-field-outline-gap {
          background-color: rgba(127, 127, 127, 0.25) !important;
        }

        .mat-form-field-outline-end {
          background-color: rgba(127, 127, 127, 0.25) !important;
        }
      }
    }
  }
}

Override Readonly/Disable Styling/CSS

3 Answers3