How to Change an input’s HTML5 placeholder color with CSS?
A placeholder in input field looks like this:
By default the color of the placeholder is black (with some opacity).
In order to change the default color of a placeholder in input field, we can use pseudo-elements and pseduo-classes.
Mozilla Firefox
/* Mozilla Firefox 4 to 18 */
[one colon]
:-moz-placeholder {
color: #909;
opacity: 1;
}
/* Mozilla Firefox 19 & above */
::-moz-placeholder {
color: #909;
}
Webkit Browsers
/*Chrome,Safari,etc*/
::-webkit-input-placeholder {
color: #909;
}
Internet Explorer
/* IE 10+ */
:-ms-input-placeholder {
color: #909;
}
Points to Note:
IE 9 & Below and Opera 12 & below do not support any CSS selector for placeholders.
Firefox’s placeholder needs to use opacity: 1 to avoid any default contrasts.
It is highly recommended to use em’s for input elements’ dimensions to avoid any cutoff in placeholder’s text.