Floated label for Input field WITH CSS ONLY

Demo:


First Name

Last Name




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