Change color of matInput
Simply assign color to these classes
.mat-focused .mat-form-field-label {
/*change color of label*/
color: white !important;
}
.mat-form-field-underline {
/*change color of underline*/
background-color: white !important;
}
.mat-form-field-ripple {
/*change color of underline when focused*/
background-color: white !important;;
}
If you put the form inside a div and give it a class then use ::ng-deep className {...} you wont override all the "mat-form-field" in the application.
::ng-deep .create-account-form {
.mat-focused .mat-form-field-ripple {
/*change color of underline when focused*/
background-color: @color-blue !important;
}
.mat-focused .mat-form-field-label {
/*change color of label when focused*/
color: @color-blue !important;
}
}
<form class="create-account-form">
<mat-form-field class="input-size">
<input type="email" mdInput formControlName="email" placeholder="Email" required matInput>
</mat-form-field>
</form>
You can use plain css
::ng-deep .mat-focused .mat-form-field-label {
/*change color of label*/
color: green !important;
}
::ng-deep.mat-form-field-underline {
/*change color of underline*/
background-color: green !important;
}
::ng-deep.mat-form-field-ripple {
/*change color of underline when focused*/
background-color: green !important;
}
or create custom theme to apply on.Here is article,how to create custom themes
https://alligator.io/angular/angular-material-custom-theme/
If you are using material theming you can use accent or primary, just add color property in mat-form-field:
<mat-form-field class="example-full-width" color="accent">
<input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>