CSS - custom radio and checkbox input fields

by PhilQ

HTML

<input type="radio" name="test1" id="test1_1" value="val1" checked="checked" /><label for="test1_1"></label><label for="test1_1">Optie 1</label>

<input type="radio" name="test1" id="test1_2" value="val2" /><label for="test1_2"></label><label for="test1_2">Optie 2</label>

<input type="radio" name="test1" id="test1_3" value="val2" /><label for="test1_3"></label><label for="test1_3">Optie 2</label>

<br />
<br />

<input type="checkbox" name="test2" id="test2_1" value="valA" checked="checked" /><label for="test2_1"></label><label for="test2_1">Optie A</label>

<input type="checkbox" name="test2" id="test2_2" value="valB" checked="checked" /><label for="test2_2"></label><label for="test2_2">Optie B</label>

<input type="checkbox" name="test2" id="test2_3" value="valC" /><label for="test2_3"></label><label for="test2_3">Optie C</label>

CSS

br {
    float: left;
    clear: left;
}
label {
    float: left;
    margin-top: 3px;
}

input[type=radio], input[type=checkbox] {
    opacity: 0; /* set to 0 to hide */
    filter: alpha(opacity=0); /* for IE*/
    position: absolute;
    z-index: -20;
}

input[type=radio] + label, input[type=checkbox] + label {
    clear: left;
    margin: 0px;
    background-color: #424242;
    width: 26px;
    height: 26px;
}

input[type=radio] + label {
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

input[type=radio]:checked + label {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAB3RJTUUH3gEdFgsQnRtnYAAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAACISURBVHja7ZTRCcAgDAW1E7hRV3GEjtDNbCfKCGkKQkFI2oQI/chBfpR4+NCkFAS/BBEL1U7V8KH1teIlqVSAPPde9ZB8xSbrcYFCBFKMi+DaqDT5l96jFq2GINieLESHBlHKhPZGrkiiw3Ae2yOJToNI3+P9vN9k8z/sIJs7goYY5w7VIHDnAtEWV0+JjGDxAAAAAElFTkSuQmCC);
}

input[type=checkbox]:checked + label {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAB3RJTUUH3gEXFiEN/ssn9QAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAACqSURBVHjaY2AYBYMB/P//vx+I1wOxAS0tKfiPChpoYYkCEL//jwmo6zOggfuxWHKf1kFGfd+ADMNhSQO1fXMeiyXnqW1Jw9AIMqghoFSUQLMgg1qCnB8SsKihPMhwZLoENIdQnspwWAS2DIgFcATZfnIjGZdl+7GIgdQqkGwREZahgwKyLCHRMtKDjAzLyA8yEi2jLMiItIw6QYbHMlAVPR+UzGlm0SjABgA6AW7jzP1sowAAAABJRU5ErkJggg==);
}

input[type=radio]:focus + label, input[type=checkbox]:focus + label {
    background-color: #4679bd;
}