Checkbox and Label Alignment

by Kyle Mitofsky

HTML

<p>Input inside Label</p>
<label>
    <input type="checkbox"/>
    Sample Check Label
</label>

<br/><br/>

<p>Label with 'for' attribute</p>
<input type="checkbox" id="myChk"/>
<label for="myChk">Sample Check Label</label>








<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    Based of this SO post: <a href='http://stackoverflow.com/q/306252/1366033'>How to align checkboxes and their labels consistently cross-browsers</a><br/>
    W3 Documentation: <a href='http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1'>Label For Attribute</a><br/>
<div>

CSS

input[type=checkbox], input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}
input[type=radio] {
    bottom: 2px;
}
input[type=checkbox]:hover {
    -webkit-box-shadow: inset 0 0 2px 2px rgba(82,168,236,.6);
}