HTML CSS

CUSTOM CHECKBOX & RADIO BUTTON

(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>

THE HTML

01

CUSTOM CHECKBOX ICON .cbox input:checked ~ label::before { content: "\2605"; }

THE CSS (PART A)

02

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; }

THE CSS (PART B)

03

DISABLED CHECKBOX .cbox input:disabled ~ label { color: #aaa; } .cbox input:disabled ~ label::before { background: #ccc; }