ProAnswers.org

Is there a way to change the color of the placeholder text with CSS?

Chrome supports the placeholder attribute on input[type=text] elements

But the following CSS doesn’t do diddly squat to the placeholder’s value:

“Value” will still be grey (er, gray. whatever) instead of red.

Is there a way to change the color of the placeholder text with CSS?

WebKit only:

input::-webkit-input-placeholder {}

But be aware: This is not a permanent solution. The discussion about the best implementation is still going on.



[b]Update 30.Sept. 2010[/b]



Mozilla (Firefox 4) now supports [:-moz-placeholder](https://developer.mozilla.org/en/CSS/%3a-moz-placeholder):

input:-moz-placeholder {}

You have to use [b]two rules[/b], because user agents are required to ignore a rule with an unknown selector. Since WebKit doesn’t know the proprietary Mozilla selector and vice versa, you have to write:

input::-webkit-input-placeholder {
color: #999;
}
input:-moz-placeholder {
color: #999;
}

To catch input and textarea just drop the element selector:

::-webkit-input-placeholder {
color: #999;
}
:-moz-placeholder {
color: #999;
}

[b]Update 01.Jan. 2011[/b]



Opera 11 [cannot style it](http://dev.opera.com/forums/topic/841252?t=1296553904&page=1#comment8072202) (yet), and it is limited to inputelements. In Opera 11.50 textarea placeholders are implemented too.



Be careful to avoid bad contrasts. Note that placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings.



In WebKit you can add:

[type=“search”]
{
-webkit-appearance: textfield;
}

Otherwise, the pseudo element may not fill the entire element, and your background-color looks odd.