Search code examples

Changing border color in mat-form-field

I am using angular material mat-form-field. I have a dark background, and therefore am trying to change the border of the form-field to white. But I am not able to achieve it using css. No, matter what changes I do in the css, they are not reflecting back into the mat-form-field. Here is the link to my code:

StackBlitz link to my work

Any help would be highly appreciated. Thanks.


  • Add this CSS to your form-field-appearance-example.css:

    /* Border */
    .mat-form-field-appearance-outline .mat-form-field-outline {
      color: white;
    /* Font color */
    input.mat-input-element {
      color: white;

    Though, there is still a problem while the field is focused.