CODEWITHSUNDEEP
angularangular-material
Coding_Rabbit
Coding_Rabbit

Reputation: 1337

How to set the focused border line color for mat-form-field

The accepted answer in this post Changing border color in mat-form-field introduced how to change the border line color of mat-form-field. I wonder whether there is a way to change the border color when it's focused. I have tried to add following code to the scss file but it does not work:

.mat-focused .mat-form-field-appearance-outline .mat-form-field-outline-thick {
  /*change color of label*/
  color: green!important;
}

Can someone tell whether there is a way to change the focused border line color?

Upvotes: 1

Views: 9920

Answers (1)

Gourav Garg
Gourav Garg

Reputation: 2911

If you want to change this color strategy for all controls then you should visit https://material.angular.io/guide/theming. You can also make custom theme with your own colors.

In case you want for a specific control, you can do with below css

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

Upvotes: 6

Related Questions