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>
Check by inspecting the browser property that is affecting your element. Take that class and edit in your local CSS content. Go to Node_modules → @angular → material → prebuilt-themes → indigo-pink. css → Find mat-form-filed-appearance-outline, and then change your color.
MatFormFieldControl. An interface which allows a control to work inside of a MatFormField .
The key to adjusting the field size is actually just adjusting the font-size in the surrounding container. Once you do that, everything else will scale with it.
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;
}
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
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With