Floated Label Pattern with CSS Only

I came across Brad Frost's post about the Floated Label Pattern and instantly thought, "I think you can do this in CSS" and set out to prove it.

It turned out to be a little trickier than expected but I created a quick proof of concept:

The Example

First Name Last Name

How it works

I use the :valid pseudo class along with the pattern attribute on the input to style the associated label accordingly.

.field { position:relative; font-family: Arial; text-transform:uppercase; font-weight:bold; display:inline-block; } label { position:absolute; left:0; top:0; transition: all .2s linear; color:#999; font-size:10px; } input { margin-top:15px; border:1px solid #999; padding:3px 2px; } input:invalid + label { top:3px; opacity:0; } input:valid + label { opacity:1; top:0; } input:focus { outline:none; } input:focus + label { color:#33A; }

Problems with this