Change color of matInput

Issue

How do I change matInput to a custom color. I want to change the placeholder and underline color.

I have read through most of the posts and could not find a solution to change the underline.

  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

Stackblitz example

Image example

Solution

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/

Answered By - Nenad Radak