Styling the HTML5 placeholder

log in boxOne of the exciting new form enhancements in HTML5  – designed to save hundreds of hours of repeated scripting – is the introduction of the placeholder attribute for form input fields.

In most websites this jiggery-pokery is still be done by Javascript, but the HTML5 browsers of the future (and the webkit browsers of today) support this with a simple form attribute, like so:

<input name="demo1" type="text" placeholder="Lorem ipsum" />

My advice is it’s worth putting placeholders into your site now (in combination with a feature-detection script such as jQuery.Placeholder).  When the time comes* you can then confidently whip out those scripts with no repercussions.

* i.e. when IE6-8 and Firefox 2-3 finally die off.

CSSing those placeholders

Taking me own advice, I’ve been adding the placeholder to my company’s website today and came across a problem many others no doubt have too; how to style those placeholders.

According to this Stack Overflow clever clogs these are the three ways of currently styling placeholders in webkit, Mozilla and Microsoft:

::-webkit-input-placeholder {}
:-moz-placeholder {}
:-ms-input-placeholder {}

So far, so good. Just be aware that these cannot be combined, and be careful that the webkit definition requires two colons, and Mozilla one.

However after some basic styling I discovered that different browsers currently have very different support when it comes to prettifying those placeholders.

Summarising the browser differences

I created this demo page with all manner of horrible looking CSS and compared it in Chrome 9+, Safari 5, Firefox 4 and Opera 11 (all in Windows 7) and Safari 3-5 in OS X.

The following browsers have no support for the placeholder tag:

  • Internet Explorer 9 (and below)
  • Opera 10 (and below)
  • Firefox 3.6 (and below)

Webkit browsers (Chrome and Safari) have supported the placeholder for at least a year, but are only recently allowing it to be styled.

Here’s the summary of the CSS properties supported:

Chrome Firefox Safari Opera IE
9-11 15 20-23 26 4-17 19 5 5.1 6 12 10
Win 7 Win 7 Win 7 Win 7
& OSX
Win 7 Win 7
& OSX
XP
& OSX
Win 7 OSX Win 7
& OSX
Win 7/8
background-color U S S S S S S U S U S
border U S S S S U S U S U S
color S S S S S S S S S U S
font-size S S S S S S S S S U S
font-style S S S S S S S S S U S
font-weight S S S S S S S S S U S
letter-spacing S S S S S S S S S U S
line-height U U S S U S U U S U S
padding top/bottom U S S S S U S U S U S
padding left/right U U U S S U U U S U S
text-align U S S S S U U U S U S
text-decoration U S S S S S S U S U S
text-transform U S S S S S S U S U S

U Unsupported S Supported

Last updated: 28/03/2013

Interestingly Chrome (v20-23) now implements more styles than any other browser, but with a major caveat – the placeholder styles do no resize the input box. So line-height and padding moves the placeholder vertically, but move it too far and it will appear outside the input box.

In the meantime if you’ve come across any hacks/cheats/workarounds for these then let me know.  Add a comment too if there are any other property inconsistencies you’ve noticed.

32 Responses to Styling the HTML5 placeholder

  1. Awesome, make sure to keep this updated, thanks a bunch :)

  2. Really useful stuff. Thanks for putting this together!

  3. Tim Kersten says:

    For mozilla, it’s:

    input:-moz-placeholder {}

    not input:-moz-input-placeholder {}

  4. Gregor says:

    Hey John, thanks for the effort, the summary table comes in super handy!
    May I suggest to add »text-align« to the list?

    I see latest FF & Safari supporting it, but unfortunately not Chrome. Can you confirm that?

  5. Aicke Schulz says:

    As you mentioned, it is not possible to combine definitions for different browser, but it’s possible for different tags, so the following works:


    input:-moz-placeholder,
    textarea:-moz-placeholder { }

  6. MikeFM says:

    As could be expected it works just fine without a specific tag too.


    :-moz-placeholder {
    color: #ccccbb;
    font-style: italic;
    }

  7. TheRocket says:

    I just tried to use some placeholder text, but I found that if I set a colour for the textbox, then the placeholder text would default to that same colour, when using Firefox 4.0.1 on Linux. However, Chromium 11.0.696.71 works properly (what I believe to be proper); the text colour and the placeholder colour can be set independently.

    • TheRocket says:

      Let me correct myself slightly. I have a number of text boxes that are all styled with some general values at once – #one, #two, #three {color: white}. I then try to add input:-moz-placeholder {color: red}, but the placeholder colour is still white. If I add #one:-moz-placeholder {color:red} it works, but this is a lot of extra work (typing) to add placeholder text when a single command should suffice.

      • Henry says:

        That’s because “#one, #two, #three” has a larger presence in CSS, they override the placeholder. Since input is a tag and :moz-placeholder is a pseudo-class, it has a less importance, hence the requirement of adding a id in front if it.

        If you changed your first rule to input[type=text] you can just use input:-moz-placeholder.

  8. Henry says:

    The placeholder in webkit is supposed to be a pseudo-element. To prevent funky effects, chrome adds more restrictions, but personally i think padding is a bad restriction (smaller / italic font for placeholders means text not aligned).

    However an advantage of using a pseudo-element instead of a class means that the input does not shrink if an italic font is used; for Firefox, if an italic font is used for the placeholder, it is likely the input would shrink because the em value of an italic font may be smaller and cause the input to shrink and enlarge on click.

  9. I’m seeing the opposite behavior with the text-transform attribute. Safari 5 (5.1.1) does NOT support it, but Chrome 15 (15.0.874.106) does:

    http://jsfiddle.net/bXzpS/

  10. Seems webkit supports font-family while FF and O doesn’t.

  11. Ian culshaw says:

    I don’t think there is support for these anymore?
    This is my test on a Mac with the latest versions.

    Chrome – unresponsive
    Firefox – unresponsive
    Safari – unresponsive

  12. Ian culshaw says:

    I’m also reading that :-ms-input-placeholder will work for IE10 but I don’t have it installed yet

  13. Ryan Cannon says:

    One thing to note about line-height is that not only is it not supported, but setting line-height in your input selector will cause Safari and MobileSafari to mis-align the placeholder text.

    The only solution I found was to un-set line-height in both my input and placeholder styles.

  14. […] found this resource stating that it cannot be done, but so far no information on why. It seems odd that the browser […]

  15. tony says:

    Hi,
    I’ve just tested on iOS 5, the padding-top isn’t supported any more. Actually, I wanted to vertically align the placeholder of the box. Please advise!

    Thanks
    Tony

  16. Ricozor says:

    Here is a solution seems to work for most browsers (including safari and iOS chrome):

    height: ...px; line-height: 1em;

    found here

    doesn’t work far ie8 and less but you have juste to override the style with :
    height: ...px

  17. Marcel says:

    Thx. Needed this, didn’t know, now I know ;)

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