Change css of placeholder text of md-autocomplete

Question

I use Angular Material version 1.1

I want to change the style of placeholder text of md-autocomplete component. 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-autocomplete{
  color: red !important;
}
md-autocomplete-wrap{
  color: red !important;
}
input{
  color: red !important;
}

Is there any way to do it?

Answer 1

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

In this case:

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

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

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

How to change

Pseudo elements

Thanks to @Rayon Dabre:

Answer 2

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