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>

See here and use this approach: https://stackoverflow.com/a/46315394/1791913 — FAISAL, Nov 17 '17 at 17:12
All the given link in comments are applicable for older version — mohit uprim, Nov 17 '17 at 17:40
if you want, i already answered in this post :) https://stackoverflow.com/a/49169033/9461168 — Wenakari, Jun 08 '18 at 12:24

score 29 · Answer 1 · answered Jun 08 '18 at 12:27

29

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

answered Jun 08 '18 at 12:27

Wenakari

688
7
6

6

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 – djangojazz Nov 14 '18 at 14:23
3

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. – Brian A Bird May 20 '20 at 21:15
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 – Yassir Khaldi Jun 20 '20 at 19:03
@Yassir Yes my post is a bit old now, it was working fine but apparently now it's not. I think it's pity... – Wenakari Jul 22 '20 at 15:04

score 25 · Answer 2 · answered Dec 20 '19 at 01:14

25

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

answered Dec 20 '19 at 01:14

jayasai amerineni

625
6
7

Thanks! that worked for me! Althought I had to add !important for some reason, I will make some more investigation though. – Charis Moutafidis May 19 '20 at 14:39
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. – Robin Jul 04 '20 at 15:16
Works perfectly, also in Angular 12. Thanks a lot! – Torben Nov 12 '21 at 19:48
Worked For Me :-) – Saad Abbasi Nov 24 '21 at 16:38

mohit uprim · Accepted Answer · 2017-11-17T17:35:10.773

23

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

edited Nov 17 '17 at 17:35

answered Nov 17 '17 at 16:38

mohit uprim

5,226
2
24
28

why someone down voted this? this is working perfect. let me know if you have concerns – mohit uprim Nov 17 '17 at 17:29
@FirmCitiInc could you please upvote this, someone down-voted and people will not check.thanks – mohit uprim Nov 17 '17 at 17:53
I did but I don't have enough rep for it to make a difference, sorry – FirmCiti Inc Nov 17 '17 at 18:02
5

What's the syntax for Mat 6? – Ka Mok May 28 '18 at 17:21

Shabbir Dhangot · Answer 4 · 2021-12-06T12:41:25.217

20

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

Here is working solution

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

edited Dec 06 '21 at 12:41

answered Apr 02 '19 at 10:55

Shabbir Dhangot

8,954
10
58
80

1

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. – dpberry178 Jan 07 '20 at 01:32
Thank you! This worked for me on Angular 13 too. – Sasan R.Nami Nov 23 '21 at 03:13
This is the only solution that worked for me, thanks! – Pavilion Sahota Feb 08 '22 at 15:47

score 3 · Answer 5 · answered Apr 01 '18 at 19:45

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

score 2 · Answer 6 · answered Jan 23 '19 at 09:29

What options we have?

<mat-placeholder> tag is deprecated: https://material.angular.io/components/form-field/api#MatPlaceholder
/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.

Utpal Kumar Das · Answer 7 · 2018-02-22T15:33:32.383

1

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

edited Feb 22 '18 at 15:33

answered Feb 22 '18 at 15:17

Utpal Kumar Das

1,226
14
21

so simple and it works! It works on Angular 13 while the other solutions don't. – steel00 Jun 23 '22 at 10:52

score 0 · Answer 8 · answered Jan 03 '18 at 23:33

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

score -3 · Answer 9 · answered Nov 17 '17 at 16:39

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/

How to change Angular 5 Material input placeholder?

9 Answers9

Linked