10

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

Out of box disabled screenshot

Angular Material Input Examples

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;
}

modified disabled screenshot

spottedmahn
  • 14,823
  • 13
  • 108
  • 178

4 Answers4

8

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.

spottedmahn
  • 14,823
  • 13
  • 108
  • 178
P.S.
  • 15,970
  • 14
  • 62
  • 86
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">.

G. Tranter
  • 16,766
  • 1
  • 48
  • 68
1

As of Angular 14, I used the following CSS taken from another post ( I believe it was Why is the pseudo-class ":read-only" not working for a "disabled" element?) :

input:read-only {
  color: red;
  font-style: italic;
}

input:-moz-read-only { /* For Firefox */
  color: red;
  font-style: italic;
}
Randy
  • 729
  • 5
  • 14
  • "from another post" can you source that? – spottedmahn Mar 14 '23 at 19:54
  • There were quite a few references to :read-only after widening my search on the Interwebs. After having 20 browser tabs open then closing some, I lost the original reference that I had found. Edited. Hopefully you need this... – Randy Mar 15 '23 at 20:23
0

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>

Updated for Material v15:

styles.scss

  .mat-form-field-readonly {
    color: $readOnlyTextColor;
    .mat-mdc-text-field-wrapper {
      background-color: $readOnlyBackgroundColor !important;
    }
  }

Previous Material versions:

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;
        }
      }
    }
  }
}
brt
  • 154
  • 1
  • 2
  • 12