For now this is only possible in Webkit and Mozilla browsers, the discussion about best implementation is still an ongoing project.
You’ll have to use 2 rules, as the standards for this is not been set yet.
For Mozilla:
:-moz-placeholder { color: #000000; } |
And for Webkit:
::-webkit-input-placeholder { color: #000000; } |
This goes for both input and textareas.
Chrome 9 & 10
Do not support background-color, border, text-decoration and text-transform when styling the placeholder.
Summary of CSS properties supported
| Chr 9-11 (Win 7) | Chr 15 (Win 7) | FF 4-8 (Win 7) | Saf 3.1 (Win XP & OS X) | Saf 5 (Win 7 & OS X) | Saf 5.1 (Win 7) | Opera 11 (Win 7) | |
|---|---|---|---|---|---|---|---|
| background-color | No | Yes | Yes | No | Yes | No | No |
| border | No | Yes | Yes | No | Yes | No | No |
| color | Yes | Yes | Yes | No | Yes | Yes | No |
| font-size | Yes | Yes | Yes | No | Yes | Yes | No |
| font-style | Yes | Yes | Yes | No | Yes | Yes | No |
| font-weight | Yes | Yes | Yes | No | Yes | Yes | No |
| letter-spacing | Yes | Yes | Yes | No | Yes | Yes | No |
| line-height | No | No | No | No | No | No | No |
| padding top/bottom | No | Yes | Yes | No | Yes | No | No |
| padding left/right | No | No | Yes | No | No | No | No |
| text-align | No | Yes | Yes | No | No | No | No |
| text-decoration | No | Yes | Yes | No | Yes | No | No |
| text-transform | No | Yes | Yes | No | Yes | No | No |
If you find a hack or a workaround for other browsers please let me know.
Easy Starter CSS Templates
Web design has never been easier with these static, Html/css templates. Choose between two or three column and select from over 50 high-res headers and 70 custom backgrounds. Read more
