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.

 

john

 

33 thoughts on “Styling the HTML5 placeholder

  1. 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?

  2. 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 { }

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


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

  4. 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.

    1. 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.

      1. 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.

  5. 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.

  6. 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

          1. To clarify, it’s not a bug. The browser ignores the whole rule set when it encounters a selector it can’t parse, which is the expected behaviour.

  7. 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.

  8. 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

  9. 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

  10. Hi, I could use some help! I have the placeholder working on IE, CHROME and Safari, but it doesn’t not seem to work on an iPad. By “not working”, I am referring to the vertical alignment. Here is the code I am using for safari:

    /* safari only */
    @supports (overflow:-webkit-marquee) and (justify-content:inherit)
    {
    #tc2015-header #ysw_search_box_id {
    Line-height: 100%;

    Is the iPad different? Sorry, I am not very technical, but trying to do this myself!

    Thanks!

Leave a Reply

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