CSS placeholder cross-browser support

A couple of years ago I wrote a blog and demo page to test what CSS attributes can be used to style the HTML5 placeholder and by which browser. I have tried to keep it up to date since, but times (and browsers) have moved on and the biggest thing missing from the last post is mobile support. So without too much waffle here’s everything you need to know to style the HTML5 placeholders.

Mark-up

<input type="text" placeholder="Enter your name here"  />

CSS

/* Webkit */
::-webkit-input-placeholder { color: #CCC; }

/* Firefox 4-18 */
:-moz-placeholder { color: #CCC; }

/* Firefox 19+ */
::-moz-placeholder { color: #CCC; }

/* IE10+ */
:-ms-input-placeholder { color: #CCC; }

Cross-browser support

View the demo page.

Chrome Firefox Safari Opera IE Dolphin
29 30 30 29 24 24 5 5.1 6 6 7 12 7 7 10 11 10
windows 7 logoOSX logo iOS6 logo iOS7 logo android logo windows 7 logoOSX logo android logo windows xp logoOSX logo windows 7 logo OSX logo iOS6 logo iOS7 logo windows 7 logoOSX logo iOS6 logo iOS7 logo windows 7 logo
windows 8 logo
windows 8 logo android logo
background-color S S S S S S S U S S S U U U S S U
border S S S S U U S U S S S U U U S S U
color S S S S S S S S S S S U U U S S S
font-size S S S S S S S S S S S U U U S S S
font-style S S S S S S S S S S S U U U S S S
font-weight S S S S S S S S S S S U U U S S S
letter-spacing S S S S S S S S S S S U U U S S S
line-height S S S S S S U U S S S U U U S S U
padding top/bottom S S S S U U S U S S S U U U S S U
padding left/right S S S S U U U U S S S U U U S S U
text-align S S S S U U U U S S S U U U S S U
text-decoration S S S S S S S U S S S U U U S S U
text-transform S S S S S S S U S S S U U U S S U

Gotchas

Be aware that these cannot be combined so must be written out individually. I suggest using a mixin with a CSS preprocessor such as Sass or Less to minimise your duplicate code.

Also Chrome (v20-30) implements almost all styles but with a major caveat – the placeholder styles do no resize the input box, so stay clear of things like line-height and padding top or bottom.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Switch to our mobile site