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

Question

How do you change the placeholder color on an angular/material input placeholder?

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

Doorsill

placeholder's colour means text's colour? – Walsingham

See here and use this approach: https://mcmap.net/q/501189/-angular-material-mdinput-border-around-the-control – Meredeth

All the given link in comments are applicable for older version – Walsingham

if you want, i already answered in this post :) https://mcmap.net/q/501190/-how-do-i-change-md-input-container-placeholder-color-using-css-in-angular-material – Cabasset

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

Walsingham

why someone down voted this? this is working perfect. let me know if you have concerns – Walsingham

@FirmCitiInc could you please upvote this, someone down-voted and people will not check.thanks – Walsingham

I did but I don't have enough rep for it to make a difference, sorry – Doorsill

What's the syntax for Mat 6? – Geniality

Answer 2

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

Cabasset

This should be the real MVP for Angular Material 6 and up. I did the selected answer and it did nothing, also the ::placeholder and all the old ways. I am on Angular7.0.0 with Material 6.4.7 and this worked right away. Thanks – Pejorative

Note: This solutions does not work in the latest version of Angular Material (v9.2.3) if you're trying to display both "mat-label" and "mat-placeholder" in the same form field. – Neman

Very frustrated because this elegant solution no longer works on angular material 9.2.4, can't believe that they didn't make the hint just of the color of the input – Dawndawna

@Yassir Yes my post is a bit old now, it was working fine but apparently now it's not. I think it's pity... – Cabasset

Answer 3

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

Ci

Thanks! that worked for me! Althought I had to add !important for some reason, I will make some more investigation though. – Fag

If taking this route then don't forget to add: , .mat-select-placeholder since selects dont have the mat-input-element but use that instead. – Functionary

Works perfectly, also in Angular 12. Thanks a lot! – Highsmith

Worked For Me :-) – Exaction

it works, but be sure to add !important – Somatic

Answer 4

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

Here is working solution

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

Polygynist

Thanks! This worked for me on Angular 8.2.14 and Material 8.2.3. I also added ::ng-deep .mat-form-field-underline{ background-color: seashell !important; } and ::ng-deep.mat-form-field-ripple { background-color: seashell !important;; } to change the underline color. – Analyze

Thank you! This worked for me on Angular 13 too. – Millenarianism

This is the only solution that worked for me, thanks! – Planar

Answer 5

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

Scold

Answer 6

What options we have?

1. <mat-placeholder> tag is deprecated: https://material.angular.io/components/form-field/api#MatPlaceholder

2. /deep/ selector will be deprecated soon. ::placeholder selector is still experimental feature: https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

So I would recommend to use input placeholder as an attribute only if your clients have modern browsers.

Lottielotto

Answer 7

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

Imperturbation

so simple and it works! It works on Angular 13 while the other solutions don't. – Cinnabar

Answer 8

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

Preselector

Answer 9

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/

Char