CODEWITHSUNDEEP
angularangular-material
spottedmahn
spottedmahn

Reputation: 16001

Override Readonly/Disable Styling/CSS

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

Upvotes: 10

Views: 22391

Answers (5)

JSON Derulo
JSON Derulo

Reputation: 17580

Angular Material does not recommend to override the styles of their internal elements. The elements and selectors might change at any time.

Instead, you should use the override SCSS mixins which are available in v19 or later. The docs now also contain a "Styling" tab which lists the available overrides. For example, to change the value color of disabled form fields, use the form-field-overrides mixin like the following:

@use "@angular/material" as mat;

:root {
  @include mat.form-field-overrides((
    filled-disabled-input-text-color: #333,
  ));
}

Also check this StackBlitz demo.

Upvotes: 1

brt
brt

Reputation: 153

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

Upvotes: 0

Randy
Randy

Reputation: 809

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

Upvotes: 1

G. Tranter
G. Tranter

Reputation: 17928

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

Upvotes: 7

P.S.
P.S.

Reputation: 16384

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.

Upvotes: 9

Related Questions