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

spottedmahn · Accepted Answer · 2018-05-11 13:23:49Z

9

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.

edited May 11, 2018 at 13:23

spottedmahn

16.2k21 gold badges124 silver badges204 bronze badges

answered May 10, 2018 at 16:17

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

G. Tranter · Accepted Answer · 2018-05-11 15:51:10Z

8

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, 2018 at 15:51

G. Tranter

18k3 gold badges52 silver badges72 bronze badges

Comments

Randy · Accepted Answer · 2023-03-15 20:21:42Z

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

edited Mar 15, 2023 at 20:21

answered Mar 14, 2023 at 18:08

Randy

8299 silver badges14 bronze badges

2 Comments

spottedmahn Over a year ago

"from another post" can you source that?

Randy Over a year ago

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...

JSON Derulo · Accepted Answer · 2024-12-20 13:05:16Z

1

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.

answered Dec 20, 2024 at 13:05

JSON Derulo

18.8k11 gold badges62 silver badges85 bronze badges

Comments

brt · Accepted Answer · 2023-03-30 19:17:33Z

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

Collectives™ on Stack Overflow

Override Readonly/Disable Styling/CSS

5 Answers 5

Comments

Comments

2 Comments

Comments

Updated for Material v15:

Previous Material versions:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Updated for Material v15:

Previous Material versions:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related