One 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.
Awesome, make sure to keep this updated, thanks a bunch 🙂
Really useful stuff. Thanks for putting this together!
For mozilla, it’s:
input:-moz-placeholder {}not
input:-moz-input-placeholder {}Thanks Tim, that’s a good spot. In my defence it was correct on the demo page…!
I thought it was both.
One for FF before ver 18 and one for 18 and after.
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?
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 { }
As could be expected it works just fine without a specific tag too.
:-moz-placeholder {
color: #ccccbb;
font-style: italic;
}
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.
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.
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.
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.
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/
You’re right – the latest version of Safari has removed some support. I have updated the table.
Seems webkit supports font-family while FF and O doesn’t.
There is a critical shortage of informative articles like this.
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
They still seem to work for me, but that’s Windows 7 rather than a Mac. Not sure why.
That’s interesting, I’ve just tested a little further:
iOS5 – unresponsive
Firefox 7.0.1 (Win 7) – unresponsive
Chrome 16 (Win 7) – unresponsive
Safari 5.0.4 (Win 7) – unresponsive
I’m using: http://jsfiddle.net/bXzpS/19/
It works if you split the the webkit and mozilla selectors, like so:
http://jsfiddle.net/ajcw/WNSW3/1/
This is a know a bug with the browser intepretation of the CSS – I mention it in the post.
i’ll be damned, thanks, great post 🙂
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.
Ah, thank’s for clarifying.
I’m also reading that :-ms-input-placeholder will work for IE10 but I don’t have it installed yet
Aha. Cheers, I have IE10 so I’ll test it and update the table.
One thing to note about
line-heightis that not only is it not supported, but settingline-heightin yourinputselector 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
inputand placeholder styles.Thanks! That solved my problem.
This is answered by Jaik above
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
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: ...pxThx. Needed this, didn’t know, now I know 😉
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!