PaperForm: Form inputs resembling paper forms

by Brenton Strine

HTML

<div class="field">
    <label class="label">Phone Number</label>
    <input type="text" placeholder="(555) 555-5555">
</div>

<div class="field drop">
    <div class="label">Choose One:</div>
    <select><option>One</option>
        <option>Two</option>
        <option>Three</option>
    </select>
</div>

<div class="field drop print">
    <div class="label">Choose One:</div>
    <select><option>One</option>
        <option>Two</option>
        <option>Three</option>
    </select>
</div>

CSS

label {display:block;}
input,
select,
.label{ 
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    font-size:12px;
}
.field{ 
    position: relative; 
    z-index:1;
    width: 300px;
    height: 50px;
    margin:20px;
}
input,
select{
 z-index:2;
 background:transparent;
 border: solid 1px #ccc;
 padding:20px 5px 5px 10px;
 margin:0;
 font-size:14px;
}

.label {
 z-index:1;
 padding:5px;
}

.drop .label {
 z-index:3;
 height:1em;
 padding-bottom:0;
 padding-right:0;
}

.drop.print select {
 display: block;
}