How to change mat-form-field border color in Angular Material

Question

I am trying to change the border color for my text box in Angular Material. Right now there are three different colors (for hover, focus, and idle). How can I change these colors?

I want them different than my theme.

<mat-form-field id="test" appearance="outline">
  <mat-label class="test2">Outline form field</mat-label>
  <input matInput placeholder="name">
</mat-form-field>

There are options to change the font size, but I can't seem to figure out the color:

mat-form-field.mat-form-field {
    font-size: 16px;
    color: red;
}

The color attribute here changes nothing.

Answer 1

According to the Angular Material documentation, you can only set the color to the primary/accent colors and warn (i.e. red).

<mat-form-field> has a color property which can be set to primary, accent, or warn. This will set the color of the form field underline and floating label based on the theme colors of your app.

---

Note: You can use some CSS hacks using ::ng-deep, but that will be eventually be deprecated. Or you can mess around with the encapsulation: ViewEncapsulation.None in your component declaration to avoid having to use ::ng-deep, but read up on that because it causes other styling issues.

::ng-deep .mat-form-field-underline, ::ng-deep .mat-form-field-ripple {
  background-color: blue !important;
}

Answer 2

You may have noticed there are two different behaviours in mat-form-field concerning border.

It has one border colour when you hover on it and when you click on it (of course if you have changed the appearance before that).

For example, if you are using:

<mat-form-field class="example-chip-list" [color]="primary" appearance="outline"> </mat-form-field>

When you hover over it you will see one colour, but when you click on it the border colour it will take will be from:

[color]="primary"

If you want to change it, follow the guidelines Angular Material provides on styling. If you want to change the colour which is when you hover over it (since ::ng-deep is deprecated) you would need to add ViewEncapsulation into your component:

@Component({
...
  encapsulation: ViewEncapsulation.None
})

And add the following to your style class:

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
    color: white;
}

This will change the colour of the element when you hover over it.

P.S.: if you have as well a suffix or a prefix element to override those colour just add this:

  mat-form-field.mat-form-field {
    color:white;
  }

P.S.: if you want to change the colour of the border when the element is not being hovered over or touched this will help:

.mat-form-field-appearance-outline .mat-form-field-outline {
  color: black;
}

UPDATE 2019-05-02:

To change the primary/secondary colour you can use http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5 to generate your own and apply it in Theming.

Answer 3

There is a way to change the colors of Angular Material styles without resorting to the deprecated ::ng-deep. Increase the specificity of the selector, and place the styles in your main/root stylesheet.

So if you have the following in your component:

<form>
  <mat-form-field class="my-form-field">
    <input matInput placeholder="My Input">
  </mat-form-field>
</form>

You can add the following styles to your main stylesheet:

/** Overrides underline color **/
.my-form-field.mat-form-field-appearance-legacy .mat-form-field-underline,
.my-form-field.mat-form-field-appearance-legacy .mat-form-field-ripple,
.my-form-field.mat-form-field-appearance-legacy.mat-focused
    .mat-form-field-underline,
.my-form-field.mat-form-field-appearance-legacy.mat-focused
    .mat-form-field-ripple {
    background-color: white;
}

/** Overrides label color **/
.my-form-field.mat-form-field-appearance-legacy .mat-form-field-label,
.my-form-field.mat-form-field-appearance-legacy.mat-focused
    .mat-form-field-label {
    color: white;
}

/** Overrides caret & text color **/
.my-form-field.mat-form-field-appearance-legacy .mat-input-element {
    caret-color: white;
  color: white;
}

StackBlitz Demo

This isn't the recommended way of styling your entire app. For that you should just create your own theme. But it can make sense for a one-off component, for instance, where your background color is clashing with your available theme colors.