Chrome supports the placeholder attribute on input[type=text]
elements (others probably do too).
But the following CSS
doesn't do anything to the placeholder's value:
Value
will still remain grey
instead of red
.
Is there a way to change the color of the placeholder text?
There are three different implementations: pseudo-elements, pseudo-classes, and nothing.
::-webkit-input-placeholder
. [Ref]:-moz-placeholder
(one colon). [Ref]::-moz-placeholder
, but the old selector will still work for a while. [Ref]:-ms-input-placeholder
. [Ref]::placeholder
[Ref]Internet Explorer 9 and lower does not support the placeholder
attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.
The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding
on an input
will not get the same background color as the pseudo-element.
User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:
a group of selectors containing an invalid selector is invalid.
So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}
<input placeholder="Stack Snippets are awesome!">
opacity: 1
here.em
and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word. placeholder
but without CSS support for that (like Opera) should be tested too.input
types (email
, search
). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance
and -moz-appearance
to change that. Example: [type="search"] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}