How to Change an input’s HTML5 placeholder color with CSS?

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>