28

Possible Duplicate:
Change an input's HTML5 placeholder color with CSS

For example, I have this:

<input type='search' placeholder='Search' name='q' />

How can I style the placeholder with CSS? By default it's gray, but I'd like it to be black. Do I have to use JavaScript instead?

Community
  • 1
  • 1
  • so apparently, this has been asked. several times. But still a good question for someone who loves stackoverflow, but behind on everything html5 has to offer. http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css – matchew Jun 26 '11 at 17:01

2 Answers2

14

no standard way, and not every browser supports place holder yet.

Something like this should do it.:

/* prefix with input if you want, but this will catch input and texatrea */
  ::-webkit-input-placeholder {  color: #000;}
  :-moz-placeholder { color: #000; }

http://jsfiddle.net/CHG46/

if you want old and new browsers to support placeholder (IE6-9) there appears to be a jquery plugin(s), here is one, https://github.com/mathiasbynens/Placeholder-jQuery-Plugin however, I have not used it before.

matchew
  • 19,195
  • 5
  • 44
  • 48
0
input[placeholder="Search"]
{
color: red
}
Jawad
  • 8,352
  • 10
  • 40
  • 45
  • That only colors inputs with that placeholder red, not the placeholders themselves. –  Jun 26 '11 at 16:54
  • This will style the *entered* text in any input that has the placeholder "Search", but it won't style the placeholder text itself. – Gareth Jun 26 '11 at 16:54
  • http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css – Jawad Jun 26 '11 at 16:58
  • http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html – Jawad Jun 26 '11 at 16:59
  • http://davidwalsh.name/html5-placeholder-css – Jawad Jun 26 '11 at 16:59
  • lol. Dont even know the placeholder attribute. Should have made comments, rather than answers. Downvotes welcomed! – Jawad Jun 26 '11 at 17:06