Floated label for Input field WITH CSS ONLY

by 1

Demo:



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

The label has to appear after the input. I'm using CSS trickery to get it into place. I'd love to be able to put the label first in the content but there's no way to style an element based on the content that comes after it.
It relies on the pattern attribute and the :valid pseudo class, which means that they can't be used for other things like validating email addresses. It'd be nice if there were a different pseudo class that I could use that detected presence of content.

One Response to “ Floated label for Input field WITH CSS ONLY ”