Change color of matInput

Question

How do I change matInput to a custom color. I want to change the placeholder and underline color.

I have read through most of the posts and could not find a solution to change the underline.

  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

Stackblitz example

Image example

You have to define your own Material theme, and then set the "color" to that theme. https://material.angular.io/guide/theming-your-components — Reactgular, Jan 03 '19 at 22:22

score 62 · Accepted Answer · edited Jun 08 '22 at 20:37

62

You can use plain css

 ::ng-deep .mat-focused .mat-form-field-label {
  /*change color of label*/
  color: green !important;
 }

 ::ng-deep.mat-form-field-underline {
  /*change color of underline*/
  background-color: green !important;
} 

::ng-deep.mat-form-field-ripple {
 /*change color of underline when focused*/
 background-color: green !important;
}

or create custom theme to apply on.Here is article,how to create custom themes

https://alligator.io/angular/angular-material-custom-theme/

edited Jun 08 '22 at 20:37

moffeltje

4,521
4
33
57

answered Jan 03 '19 at 21:01

Nenad Radak

3,550
2
27
36

9

`::ng-deep` and `/deep/` are deprecated by the way. – Reactgular Jan 03 '19 at 22:24
Thanks. Using --> ::ng-deep.mat-form-field-ripple { /*change color of underline when focused*/ background-color: green !important;; } works. – J man Jan 04 '19 at 09:21
Great,you should also try with material custom themes.Here is one example from my prevous answer: https://stackoverflow.com/questions/53213544/how-to-change-color-of-angular-material-stepper-step-icons/53214714#53214714 – Nenad Radak Jan 04 '19 at 10:12
2

To new developers please note that this way is now deprecated and should no longer be used. If you still need a solution to change css on angular components child elements then you can still do them in your main styles.scss – L1ghtk3ira Jul 16 '19 at 19:42
1

@Reactgular i thought is not deprecated yet They have been saying they are going to deprecated since like 3 versions ago. – Patricio Vargas Aug 31 '19 at 00:38
1

@L1ghtk3ira sometimes you still have to add ng-deep in the styles css – Patricio Vargas Aug 31 '19 at 00:38
@PatricioVargas I would not recommend using ng-deep at all. This is deprecated and will be removed from Angular at some point in time. You don't need ng-deep at all if you do those styles from styles.scss or a stylesheet that it imports. – L1ghtk3ira Sep 03 '19 at 12:26
1

@L1ghtk3ira not quite true. I have tried without the ng-deep and the styles changes didn't reflect at all :( – Patricio Vargas Sep 03 '19 at 16:13
@PatricioVargas I mean this as politely as I can but you must be doing something wrong. My main guess is some other style has higher precedence and your styles are being overwritten or your css scope is just incorrect. I have done this with a few projects and can guarantee this approach works as it is also advised in many other articles and also the Angular Team suggests not to use it. Please either take another look or if you have somewhere for me to review I can do that as well. Ng-deep should no longer be an acceptable answer due to the deprecation. – L1ghtk3ira Sep 03 '19 at 18:17
1

@PatricioVargas Also the styles won't work in the component where you used to have ng-deep. It has to be at a higher level in your styles.scss or a different sass file that is imported in styles.scss – L1ghtk3ira Sep 03 '19 at 18:39

score 9 · Answer 2 · answered May 11 '20 at 23:00

9

If you are using material theming you can use accent or primary, just add color property in mat-form-field:

<mat-form-field class="example-full-width" color="accent">
   <input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>

answered May 11 '20 at 23:00

Camilo Mendoza

186
1
3

score 7 · Answer 3 · answered Nov 20 '19 at 11:59

If you put the form inside a div and give it a class then use ::ng-deep className {...} you wont override all the "mat-form-field" in the application.

::ng-deep .create-account-form {
  .mat-focused .mat-form-field-ripple {
    /*change color of underline when focused*/
    background-color: @color-blue !important;
  }
  .mat-focused .mat-form-field-label {
    /*change color of label when focused*/
    color: @color-blue !important;
   }
}

<form class="create-account-form">
      <mat-form-field class="input-size">
        <input type="email" mdInput formControlName="email" placeholder="Email" required matInput>
      </mat-form-field>
</form>

Thanks, that's very useful if someone does not want to override other mat-form-field — Tia, Dec 01 '21 at 07:17

score 5 · Answer 4 · edited Sep 04 '21 at 22:26

Simply assign color to these classes

    .mat-focused .mat-form-field-label {
      /*change color of label*/
      color: white !important;
     }
    
     .mat-form-field-underline {
      /*change color of underline*/
      background-color: white !important;
    } 
    
    .mat-form-field-ripple {
     /*change color of underline when focused*/
     background-color: white !important;;
    }

score 3 · Answer 5 · answered Jan 03 '19 at 20:57

There are two classes, .mat-form-field-label for the text label and .mat-form-field-underline for the underline. Override these two classes by giving them desired styles.

Here is a working link

https://stackblitz.com/edit/angular-nhvrog-zexty5?file=styles.css

Thanks.

score 2 · Answer 6 · answered Sep 20 '22 at 14:39

In addition to this good answer https://stackoverflow.com/a/69040241/19530488, this is how i change the color of the 'border' of mat-form-field with outline appearance:

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  color: lightblue !important;
}

score 1 · Answer 7 · answered Jul 25 '23 at 17:28

This should not be considered as best practice!

Environment:

Angular v. 15.2
Angular Material v. 15.2

I changed following css classes (in the style.css) and the styling worked as expected:

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
  border-color: white !important;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: white !important;
}

.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
  border-left: none;
}

.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
  color: white;
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: white;
}

.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: #f44336;
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
  color: white;
}

<mat-form-field appearance="outline">
  <mat-label>Firstname</mat-label>
  <input matInput formControlName="firstName">
</mat-form-field>

score 0 · Answer 8 · answered Dec 18 '21 at 22:10

0

The simplest solution is to use the pre built material directive

<mat-form-field appearance="legacy">

answered Dec 18 '21 at 22:10

Mohammed

171
2
11

score 0 · Answer 9 · answered Apr 28 '23 at 14:23

In addition to all those good answers (except for ng-deep being deprecated as we all know) if you want to control caret color as well:

.mat-form-field-infix .mat-input-element {
  caret-color: white !important;
  // or tailwind SASS version
  @apply dark:tw-caret-primary-contrast-dark #{!important};
}

score 0 · Answer 10 · edited Jul 21 '23 at 12:37

0

Try this:

.mdc-text-field--filled:not(.mdc-text-field--disabled) {background-color: #ffffff !important;}

edited Jul 21 '23 at 12:37

Marco

2,368
6
22
48

answered Jul 14 '23 at 14:40

Anatolii Stoliarenko

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 19 '23 at 13:43

Change color of matInput

10 Answers10

Linked

Related