I use Angular Material version 1.1

I want to change the style of placeholder text of md-autoplete ponent. However, i could not select the placeholder as an apart element to play with its styling.

Here you see a codepen to illustrate the problem.

I tried the following dictating codes but they did not work

md-autoplete{
  color: red !important;
}
md-autoplete-wrap{
  color: red !important;
}
input{
  color: red !important;
}

Is there any way to do it?

I use Angular Material version 1.1

I want to change the style of placeholder text of md-autoplete ponent. However, i could not select the placeholder as an apart element to play with its styling.

Here you see a codepen to illustrate the problem.

I tried the following dictating codes but they did not work

md-autoplete{
  color: red !important;
}
md-autoplete-wrap{
  color: red !important;
}
input{
  color: red !important;
}

Is there any way to do it?

• javascript
• html
• css
• angularjs
• angular-material

Share Improve this question Follow asked Apr 1, 2016 at 10:58 AsqanAsqan 4,4991212 gold badges6363 silver badges103103 bronze badges 3

• 1 ::-webkit-input-placeholder { color: red; } – Rayon Commented Apr 1, 2016 at 11:03
• would it work in all browsers? and would it be valid for all input fields? – Asqan Commented Apr 1, 2016 at 11:06
• Go through the reference.. – Rayon Commented Apr 1, 2016 at 11:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

To change the placeholders within an element, the pseudo element placeholder should be user.

In this case:

md-autoplete input::-webkit-input-placeholder {
    color:red;
}
md-autoplete input:-moz-placeholder { /* Firefox 18- */
    color:red;
}

md-autoplete input::-moz-placeholder {  /* Firefox 19+ */
    color:red;
}

md-autoplete input:-ms-input-placeholder { 
    color:red;
}

How to change

Pseudo elements

Thanks to @Rayon Dabre:

You can use following selector to style the [placeholder] for different browser.

::-webkit-input-placeholder {
   color: blue;
}

:-moz-placeholder { /* Firefox 18- */
   color: blue;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: blue;  
}

:-ms-input-placeholder {  
   color: blue;  
}

Example on CodePen : http://codepen.io/bigbrov/pen/LNzbqp