Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How Can I customize mat-form-field in disabled state

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
 {

 }

enter image description here

I want this to be gray solid in disabled state

 <mat-form-field>
    <input matInput placeholder="Input" [disabled]='true'>
  </mat-form-field>
like image 830
Ebram Avatar asked Jan 24 '19 21:01

Ebram


People also ask

How do I change the color of my 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.

What is MatFormFieldControl?

MatFormFieldControl. An interface which allows a control to work inside of a MatFormField .

How do you change the size of a mat form field?

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.


3 Answers

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; 
    } 
like image 116
Ebram Avatar answered Oct 02 '22 15:10

Ebram


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

like image 27
Web Nexus Avatar answered Oct 02 '22 16:10

Web Nexus


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);
    }
like image 23
iugs88 Avatar answered Oct 02 '22 16:10

iugs88