Changing border color in mat-form-field

Issue

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.

Solution

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.

Answered By - pzaenger