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

Question

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>

Hi, how did you solve that? – Furqan S. Mahmoud Apr 29 '19 at 08:40 — Furqan S. Mahmoud, Apr 29 '19 at 08:40
Try this : https://stackoverflow.com/a/55912467/2727006 – Ebram Apr 30 '19 at 00:37 — Ebram, Apr 30 '19 at 00:37

score 9 · Accepted Answer · answered Apr 30 '19 at 00:37

9

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

answered Apr 30 '19 at 00:37

Ebram

1,042
1
13
26

ng-deep is deprecated :') https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep – Antoine Boisier-Michaud Jan 07 '22 at 02:19

Web Nexus · Answer 2 · 2019-01-25T00:02:44.543

1

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

edited Jan 25 '19 at 00:02

answered Jan 24 '19 at 22:13

Web Nexus

1,150
9
28

I 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; } – Ebram Jan 24 '19 at 23:48
Add it to your style.css without the ng-deep and you need to change the background-size. Also try adding !important. – Web Nexus Jan 24 '19 at 23:56
Didn'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; } – Ebram Jan 25 '19 at 00:00
Your background size is still 4px, also add a space between the classes. – Web Nexus Jan 25 '19 at 00:00
This 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; } – Ebram Jan 25 '19 at 00:25

score 1 · Answer 3 · answered Jan 19 '21 at 08:26

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

score 0 · Answer 4 · answered Jan 25 '19 at 00:43

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

score 0 · Answer 5 · answered Feb 11 '22 at 15:21

You don´t need linear gradient in background-image. This worked for me:

::ng-deep .mat-form-field-disabled .mat-form-field-underline {
  background-color: #949494 !important;
  background-size: 1px 100% !important;
  background-repeat: repeat-x !important;
}

score 0 · Answer 6 · answered Jul 15 '22 at 09:39

0

::ng-deep .mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline,
    .mat-input-element:disabled {
        color: red;

    }

this did the job for me, to color the text and the borders.

answered Jul 15 '22 at 09:39

Rafik Belkadi

146
1
6

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

6 Answers6

Linked