How to change Angular 5 Material input placeholder? [duplicate]

Answer 1

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

Answer 2

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

Answer 3

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 4

One solution provided by material 2 itself found in example code. I have done a sample here:

 <mat-form-field>
   <mat-label>Input</mat-label>
   <input matInput >
 </mat-form-field>

Plunker

Answer 5

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 6

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