CSS only Floated Label Pattern

Code snippet for floated label pattern with css only

Demo

css

CSS

.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; }

Markup

<form>
  <div class="field">
    <input type="text" pattern=".+" required="" placeholder="First Name"><label>First Name</label>
  </div>  <div class="field">
    <input type="text" pattern=".+" required="" placeholder="Last Name"><label>Last Name</label>
  </div>
</form>

For a detailed explanation: Source