Chrome v4 supports the placeholder attribute on input[type=text] elements (others probably do too).
However, the following CSS doesn't do anything to the placeholder's value:
input[placeholder], [placeholder], *[placeholder] {
color: red !important;
}<input type="text" placeholder="Value">Value will still remain grey instead of red.
Is there a way to change the color of the placeholder text?
/* do not group these rules */
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
/* FF 4-18 */
color: red;
opacity: 1;
}
*::-moz-placeholder {
/* FF 19+ */
color: red;
opacity: 1;
}
*:-ms-input-placeholder {
/* IE 10+ */
color: red;
}
*::-ms-input-placeholder {
/* Microsoft Edge */
color: red;
}
*::placeholder {
/* modern browser */
color: red;
}<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>This will style all input and textarea placeholders.
Important Note: Do not group these rules. Instead, make a separate rule for every selector (one invalid selector in a group makes the whole group invalid).
In addition to toscho's answer I've noticed some webkit inconsistencies between Chrome 9-10 and Safari 5 with the CSS properties supported that are worth noting.
Specifically Chrome 9 and 10 do not support background-color, border, text-decoration and text-transform when styling the placeholder.
The full cross-browser comparison is here.