HTML CSS
(quick & simple example)
CHECKBOX <div class="cbox"> <input type="checkbox" id="check"> <label for="check">Checkbox</label> </div>
RADIO BUTTON <div class="cbox"> <input type="radio" id="r1" name="r"> <label for="r1">Radio</label> <input type="radio" id="r2" name="r"> <label for="r2">Radio</label> </div>
CUSTOM CHECKBOX ICON .cbox input:checked ~ label::before { content: "\2605"; }
CUSTOM CHECKBOX SQUARE .cbox label::before { content: "\00a0"; display: inline-block; width: 25px; margin-right: 5px; text-align: center; background: #f2f2f2; }
HIDE ORIGINAL CHECKBOX .cbox input { display: none; }
DISABLED CHECKBOX .cbox input:disabled ~ label { color: #aaa; } .cbox input:disabled ~ label::before { background: #ccc; }