Styled checkboxes

by karin

HTML

<div>
    <input id="option" type="checkbox" name="field" value="option">
    <label for="option"><span><span></span></span>Value</label>
    <input id="option2" type="checkbox" name="field" value="option">
    <label for="option2"><span><span></span></span>Value</label>
    <input id="option3" type="checkbox" name="field" value="option">
    <label for="option3"><span><span></span></span>Value</label>
</div>

CSS

input[type=checkbox]:not(old), input[type=radio]:not(old) {
    width : 2em;
    margin : 0;
    padding : 0;
    font-size : 1em;
    opacity : 0;
}
input[type=checkbox]:not(old) + label, input[type=radio]:not(old) + label {
    display : inline-block;
    margin-left : -2em;
    line-height : 1.5em;
}
input[type=checkbox]:not(old) + label > span, input[type=radio]:not(old) + label > span {
    display : inline-block;
    width : 0.875em;
    height : 0.875em;
    margin : 0.25em 0.5em 0.25em 0.25em;
    border : 0.0625em solid rgb(192, 192, 192);
    border-radius : 0.25em;
    background : rgb(224, 224, 224);
    background-image : -moz-linear-gradient(rgb(240, 240, 240), rgb(224, 224, 224));
    background-image : -ms-linear-gradient(rgb(240, 240, 240), rgb(224, 224, 224));
    background-image : -o-linear-gradient(rgb(240, 240, 240), rgb(224, 224, 224));
    background-image : -webkit-linear-gradient(rgb(240, 240, 240), rgb(224, 224, 224));
    background-image : linear-gradient(rgb(240, 240, 240), rgb(224, 224, 224));
    vertical-align : bottom;
}
input[type=checkbox]:not(old):checked + label > span, input[type=radio]:not(old):checked + label > span {
    background-image : -moz-linear-gradient(rgb(224, 224, 224), rgb(240, 240, 240));
    background-image : -ms-linear-gradient(rgb(224, 224, 224), rgb(240, 240, 240));
    background-image : -o-linear-gradient(rgb(224, 224, 224), rgb(240, 240, 240));
    background-image : -webkit-linear-gradient(rgb(224, 224, 224), rgb(240, 240, 240));
    background-image : linear-gradient(rgb(224, 224, 224), rgb(240, 240, 240));
}
input[type=checkbox]:not(old):checked + label > span:before {
    content :'✓';
    display : block;
    width : 1em;
    color : rgb(153, 204, 102);
    font-size : 0.875em;
    line-height : 1em;
    text-align : center;
    text-shadow : 0 0 0.0714em rgb(115, 153, 77);
    font-weight : bold;
}
input[type=radio]:not(old):checked + label > span > span {
    display : block;
    width : 0.5em;
...