How to change placeholder color with css

By default, if you put placeholder, the color is grey, but can we change it to our desire color?
yes we can.
Since this is HTML5 attribute , so vendor prefix still required at this time
example.

<input type="text" placeholder="placeholder default input">


what we get is like this

So, how we gonna do change placehodler color? how we can change it to our desire color?

here are the CSS

::-webkit-input-placeholder {
color: green;
}
:-moz-placeholder { /* Firefox 18- */
color: green;
}
::-moz-placeholder {  /* Firefox 19+ */
color: green;
}
:-ms-input-placeholder {
color: green;
}

so it will change into something like this

cool right? but wait, another placeholder need different color. yes still can.
first, create the html with ID/Class

<input type="text" id="input_rare" placeholder="placeholder input rare">

CSS:

#input_rare::-webkit-input-placeholder {
color: red;
}
#input_rare:-moz-placeholder { /* Firefox 18- */
color: red;
}
#input_rare::-moz-placeholder {  /* Firefox 19+ */
color: red;
}
#input_rare:-ms-input-placeholder {
color: red;
}

the you will get placeholder with this color

and now, we are done. lets see the html and css involved.

Output: