[Fixed] I want to change the font color of a disabled input

Issue

I want to change the font color of V1. It’s a disabled input and I want to make it darker. How can I do this for Chrome?

enter image description here

My HTML code is;

 <mat-form-field appearance="outline" fxFlex="100" fxFlex.gt-xs="30" class="w-100-p"
                        ngClass.gt-xs="pr-4">
                        <mat-label>Versiyon</mat-label>
                        <input matInput formControlName="Revision" type="text">
                    </mat-form-field>

Mind you, it’s a reactive form so, my TS code is:

    Revision: new FormControl({ value: "", disabled: true }),

Solution

You can add this CSS class in your styles.scss file :

For label

.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-label {
  color: rgba(0,0,0,.6)!important;
}

For input value

.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after, .mat-input-element:disabled {
  color: rgba(0,0,0,1)!important;
}

enter image description here

Leave a Reply

(*) Required, Your email will not be published