checkbox/radio style

by narensrinivasans

HTML

<p><input type='checkbox' name='thing' value='valuable' id="thing" class="checkbox"/><label for="thing" class="checkbox-label"> Check Box </label></p>
<p><input type='checkbox' name='thing1' value='valuable2' id="thing2" class="checkbox"/><label for="thing2" class="checkbox-label"> Check Box </label></p>

<p><input type='radio' name='thing3' value='valuable3' id="thing3" class="radio"/><label for="thing3" class="radio-label" checked="checked"> Radio Button </label></p>
<p><input type='radio' name='thing3' value='valuable4' id="thing4" class="radio"/><label for="thing4" class="radio-label"> Radio Button </label></p>

CSS

.checkbox {
display:none;
}
.checkbox + label
{
    position:relative;
    width:200px;
    height:16px;
    display:block;
    cursor:pointer;
    padding-left:26px;
}
.checkbox + label:before
{
position:absolute;
left:0;
content: '';
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}

.checkbox:checked + label:before
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}

.radio {
display:none;
}
.radio + label
{
    position:relative;
    width:200px;
    height:16px;
    display:block;
    cursor:pointer;
    padding-left:26px;
}
.radio + label:before
{
position:absolute;
left:0;
content: '';
background: #999;
height: 16px;
width: 16px;
border-radius: 16px;
display:inline-block;
padding: 0 0 0 0px;
}

.radio:checked + label:before
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}