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.

Printing Jira tickets

Since we moved to Jira in the cloud we’ve lost the SPARTEZ ‘Agile Scrum Cards Print‘ plugin. This has left us to hand write our scrum cards on post-it note or scraps of paper.

Being a front-end dev the aesthetics of my scrum board are important to me and scribbled post-it notes just won’t do. So using the Greasemonkey Firefox extension I written a small script to apply a print stylesheet to Jira tickets which strips out the unnecessary content and prints small neat cards.

The code is on Github – please use and/or improve it.

https://github.com/opentable/greasemonkey-printable-jira

Before

After

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" />

Continue reading

Easyspace – easy theft

I’m not normally an angry person (well I can be a bit grumpy sometimes), but having to deal with British Internet Service Provider Easyspace has got my goat this week.

It started with a couple of mystery payments on my credit card, which after having rung my credit card and Easyspace turned out to be for a website I built 11 months ago, that had been automatically renewed a month ahead of its due date.

Fair enough you might think. Unusual (not to mention cheeky) I thought, but that’s the way they work.  It was also annoying as it was a site I was going to cancel anyway.  The anger came when I tried to cancel the hosting.

Continue reading

Move the refresh button in Firefox and IE9

Here’s my first short post which is about fixing an annoying change that Mozilla revealed in the beta version of Firefox 4.  When I downloaded Beta 9 last week I was horrified to see they’d copied Internet Explorer and moved the refresh button from the top left to the top right…

It’s bad enough in IE, but I only ever use IE for testing so the mouse-up-to-top-left-then-realise-it’s-IE-and-move-across-to-the-right issue is annoying but I don’t lose sleep over it (and F5 is everyone’s friend anyway).

But top-right in Firefox – now that is annoying.

Continue reading

Automated CSS testing, or how one CSS coder is now responsible for breaking – and fixing – the build

For the last six months or so the traditional process of releasing the latest version of our company website has been simplified and automated by one particular bright-eyed, talented young developer with a penchant for Ruby.

As the company’s CSS/UI/Front End guy this technical stuff is way out of my remit, but the end product has been hugely useful for the IT team as a whole; my single biggest benefit is being able, with a single click in TeamCity, to publish websites to various test servers.

So whilst the automated wizardry has being going on around me, I haven’t followed how it’s been happening, but I’ve understood why; getting everything automated saves time, right?  So why not get my front-end work in on the act?

Continue reading

Switch to our mobile site