Change an input's HTML5 placeholder color with CSS

Question

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too).

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

<style>
    input[placeholder], [placeholder], *[placeholder]
    {
        color:red !important;
    }
</style>
<input type="text" placeholder="Value" />

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

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

p.s. I'm already using the jQuery placeholder plugin for the browsers that don't support the placeholder attribute natively.

Answer 1

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.

Update 30.Sept. 2010

Mozilla (Firefox 4) now supports :-moz-placeholder:

input:-moz-placeholder {}

You have to use two rules, 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;
}