Changing Border Color In Mat-form-field

Answer :

I think this will cover everything.

// mat-icon-stepper selected color change  ::ng-deep .mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {     background-color: red!important; }  //input outline color ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {     color: red!important;     // opacity: 1!important; }  //mat-input focused color ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {     color: red!important; }  // mat-input error outline color ::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick{     color: red!important;     opacity: 0.8!important; }  // mat-input carent color ::ng-deep .mat-input-element {     caret-color: red!important; }  // mat-input error carent color ::ng-deep .mat-form-field-invalid .mat-input-element, .mat-warn .mat-input-element {     caret-color: red!important; }  // mat-label normal state style ::ng-deep .mat-form-field-label {     color: rgba(0,0,0,.6)!important;     // color: $mainColor!important; }  // mat-label focused style ::ng-deep .mat-form-field.mat-focused .mat-form-field-label {     color: red!important; }  // mat-label error style ::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label {     color: red!important; } 

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.

For the newer outlined form fields, solved it this way:

::ng-deep {      .mat-form-field-appearance-outline .mat-form-field-outline {         color: white;      }      mat-form-field {         .mat-hint, input, ::placeholder, .mat-form-field-label {            color: white;         }      }   }