Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Web Form Labels
<label for="asus-nexus-7">
<input type="checkbox" name="devices[]" id="asus-nexus-7" value="Asus Nexus 7">
Asus Nexus 7
</label>
<input type="checkbox" id="asus-nexus-7" name="devices[]" value="Asus Nexus 7">
<label for="asus-nexus-7">Asus Nexus 7</label>
.form-control {
position: relative;
}
label {
display: block;
position: absolute;
top: 50%;
margin-top: -.5em;
left: .25em;
transition: .25s transform;
}
input {
display: block;
border: 1px solid;
border-radius: 3px;
padding: .25em;
}
input:focus + label {
transform: translateY(-1.5em);
}
<p class="form-control">
<input id="full_name" name="full_name">
<label for="full_name">Your Name</label>
</p>
<label>
<input type="checkbox" name="devices[]" value="Asus Nexus 7">
Asus Nexus 7
</label>
<label for="full_name">Your Name</label>
<input id="full_name" name="full_name">
.grouped label {
margin: -1em 0;
padding: 1em 0;
}
input {
width: 80%;
}
input[type=checkbox],
input[type=radio] {
width: auto;
}
input {
width: 80%;
}
label input {
width: auto;
}
<input type="checkbox" name="devices[]" value="Asus Nexus 7">
Asus Nexus 7
Your Name
<input name="full_name">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment