How to change Angular 5 Material input placeholder

Question

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

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

Answer 1

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;
}

Answer 2

Angular material in itself doesn't provide any directives for setting styles.For this, you need to go old school. Just give an id/class to your input element then use pseudo class (::placeholder). For reference : https://css-tricks.com/almanac/selectors/p/placeholder/

Answer 3

I found no answer from above from Working with latest angular material with angular 6.

Here is working solution

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

Answer 4

For angular material 5.x.x or above there is amat-placeholder element you can use. You don't need to override material css classes. This aproach -I think- is the best:

  <mat-form-field class="full-width">
            <input matInput type="text" name="name" formControlName="name" >
            <mat-placeholder style="color:brown">Enter your name here</mat-placeholder>
            <mat-icon matSuffix class="material-icons">perm_identity</mat-icon>
          </mat-form-field>

Note: You can not use placeholder attribute in input tag at the same time with mat-placeholder element in the same mat-form-field tag.

For further information: https://material.angular.io/components/input/overview#floating-placeholder

Answer 5

As @mohit uprim suggested in the answer above, We can use the shadow piercing descendant combinators i.e. /deep/ or ::ng-deep or >>> Below is an example

/deep/ .mat-form-field-placeholder {
  color: #fff;   // choose the color you want
}

OR

>>> .mat-form-field-placeholder {
  color:red;
}

Although this method is specified in the angular docs as of now, they have mentioned that this method will soon be deprecated. read more: https://angular.io/guide/component-styles#!#-deep-

According to Angular.io documentation, the proper way of doing this is to change the view encapsulation to none on your component and then writing your custom styles in the css file respective to this component. Please be advised that by doing so, you are moving away from shadow dom and emulated techniques(default in an angular project) which means the styles you specify in this component may propagate to the parent/child components and may mess up the styling there too

Answer 6

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