October 30th 2014

Simple and Safe Way to Use Placeholders as Labels

It's popular to use placeholder attributes to label inputs and textareas, but IE 8 and 9 ignore them. (Opera Mini, too.)

That means you have to use labels, and you can't take advantage of the visual simplicity of the placeholder.

Truthfully, you should use something like the float label pattern, for reasons Brad Frost better explains at that link.

If you want to just use placeholders and keep it simple, though, I've found another solution that I'll share here.

It's uses SASS and one external script, but it's super simple. (The script is called Conditionizr, and I use it on every website... read about it on the Conditionizr website.)

My browser-compatible placeholder-as-label solution looks like this... 

In your head tag, add the Conditionizr script...



In a form, use labels and placholders as you would normally (add the for= attribute that I skipped), but use the same value for label and placeholder.



Then, using SASS, take advantage of Conditionizr and the &, and add this...

label {
	display:none;

	.ie8 &,.ie9 & {
		display:block;
	}
}

Really, all that does is hide the labels unless the browser (Internet Explorer 8 and 9) doesn't display placeholders. In that case, the labels are shown.

Hope that can help you!