How to change Angular 5 Material input placeholder?

Viewed 61919

How do you change the placeholder colour on a angular/material input placeholder?

<mat-form-field>
    <input matInput placeholder="Name">
  </mat-form-field>
9 Answers

In the last version of angular you can remove the placeholder in the input and add a mat-placeholder in the mat-form-field and custom the css with a class

html :

<mat-form-field>
    <input matInput type="text">
    <mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>

css:

.mat-focused .placeholder {
    color: #00D318;
}

To change the color of placeholder, override the color property of .mat-form-field-placeholder like:

::ng-deep .mat-form-field-placeholder{

  color:red;
}

::ng-deep .mat-focused .mat-form-field-placeholder{

  color:red;
}

To change the color of underline:

::ng-deep .mat-form-field-underline .mat-form-field-ripple{

  background-color:red;
}

::ng-deep .mat-form-field-underline{

  background-color:red;
}

This works perfect. Demo: https://plnkr.co/edit/yF4kXJ500YzefLOnLKNe?p=preview

I am using angular material 8.2.3 and None of the above solutions worked for me and having the following in theme.scss(material theme file) worked for me

.mat-input-element::placeholder{
   color: red;
}

conversely with piercing the following should work in component styles

::ng-deep .mat-input-element::placeholder{
    color: red;
}

Non of the above answers worked for me in latest versions.

Here is working solution

::ng-deep .mat-form-field-label{
    color:#000 !important;
}
Related