How Can I customize mat-form-field in disabled state
15,864
Solution 1
This Fixed it :
::ng-deep.mat-form-field-disabled .mat-form-field-underline
{
background-image: linear-gradient( to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.42) 33%, #c2c7cc 0 ) !important;
background-size: 1px 100% !important;
background-repeat: repeat-x !important;
}
Solution 2
You can try
::ng-deep .mat-form-field-disabled {
.mat-input-element {
color: rgba(0, 0, 0, 0.14);
}
.mat-form-field-label {
color: rgba(0, 0, 0, 0.14);
}
.mat-form-field-underline {
color: rgba(0, 0, 0, 0.14);
}
.mat-form-field-ripple {
color: rgba(0, 0, 0, 0.14);
}
.mat-form-field-required-marker {
color: rgba(0, 0, 0, 0.14);
}
Solution 3
You need to target the following class:-
.mat-form-field-disabled .mat-form-field-underline
The css you will be looking to change is:-
background-image: linear-gradient(to right,rgba(0,0,0,1) 0,rgba(0,0,0,.42) 33%,transparent 0);
background-size: 4px 100%;
background-repeat: repeat-x;
So you can either unset: all
and start from fresh or update the background-size: 1px 100%;
or whatever suits your needs
Author by
Ebram
Updated on June 11, 2022Comments
-
Ebram almost 2 years
I am trying to customize the angular material mat-form-field : I was able to customize the underline border using :
::ng-deep.mat-form-field-ripple { background-color: yellow; }
now I am trying to customize the underline border in the disabled state to be solid instead of the dashed line :
I tried this but it didn't work for underline :
::ng-deep.mat-form-field-disabled { }
I want this to be gray solid in disabled state
<mat-form-field> <input matInput placeholder="Input" [disabled]='true'> </mat-form-field>
-
Furqan S. Mahmoud about 5 yearsHi, how did you solve that?
-
Ebram about 5 yearsTry this : stackoverflow.com/a/55912467/2727006
-
-
Ebram over 5 yearsI tried it didn't work --> ::ng-deep.mat-form-field-disabled.mat-form-field-underline { background-image: linear-gradient( to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.42) 33%, transparent 0 ); background-size: 4px 100%; background-repeat: repeat-x; }
-
Web Nexus over 5 yearsAdd it to your style.css without the ng-deep and you need to change the background-size. Also try adding !important.
-
Ebram over 5 yearsDidn't work ---> .mat-form-field-disabled.mat-form-field-underline { background-image: linear-gradient( to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.42) 33%, transparent 0 ) !important; background-size: 4px 100% !important; background-repeat: repeat-x !important; }
-
Web Nexus over 5 yearsYour background size is still 4px, also add a space between the classes.
-
Ebram over 5 yearsThis worked --> ::ng-deep.mat-form-field-disabled .mat-form-field-underline { background-image: linear-gradient( to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.42) 33%, #c2c7cc 0 ) !important; background-size: 1px 100% !important; background-repeat: repeat-x !important; }
-
Antoine Boisier-Michaud over 2 yearsng-deep is deprecated :') stackoverflow.com/questions/47024236/…