Floated Label Pattern with CSS

by toubia95

HTML

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

CSS

/* http://snook.ca/archives/html_and_css/floated-label-pattern-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;
}