Change Css Of Placeholder Text Of Md-autocomplete

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 p

Solution 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:

Solution 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