Float Labelled Inputs

by spectre

HTML

<form>
<span class="float">
    <input type="text" placeholder="First Name" required="required" />
    <span class="label">First Name</span>
</span>
<span class="float">
    <input type="text" placeholder="Middle Name" required="required" />
    <span class="label">Middle Name</span>
</span>
<span class="float">
    <input type="text" placeholder="Last Name" required="required" />
    <span class="label">Last Name</span>
</span>
<br/>
<span class="float">
    <input type="text" placeholder="Home Phone" required="required" />
    <span class="label">Home Phone</span>
</span>
<span class="float">
    <input type="text" placeholder="Work Phone" required="required" />
    <span class="label">Work Phone</span>
</span>
<span class="float">
    <input type="text" placeholder="Mobile Phone" required="required" />
    <span class="label">Mobile Phone</span>
</span>
</form>

CSS

body {
    padding: 0; margin: 0;
}

.float {
    position: relative;
}

.float > input {
    margin: 0 -2px; padding: 25px 10px 5px; 
    border: 0;
    border-bottom: 1px solid #DDD;
    border-right: 1px solid #DDD;
    font-size: 20px;
}

.float > input:focus {
    outline: 0;
}

.float > input + span.label {
    position: absolute; display: none;
    left: 0; padding: 1px; 
    color: #888;     
    font-size: 18px;
        
}

.float > input:valid + span.label {
    display: inline-block;
}
.float > input:valid:focus + span.label {
    color: #55F;
}