pub-6887543428250003

CSS TRICKS

Float Labels with CSS | CSS-Tricks

Float Label Address

"You’ve probably seen this pattern going around. It’s an input that appears as if it has placeholder text in it, but when you click/tap into that input, that text moves out of the way and allows you to type there. It’s rather clever, I think. Brad Frost has a really good post on it, detailing the pros and cons and such.

Many of the demos I’ve seen involve JavaScript. The other day I was checking out at Nest.com, saw their technique for it, and I thought of a way I could pull that off without JavaScript. So here we are."