HTML CSS

CUSTOM CHECKBOX & RADIO BUTTON WITH PURE CSS

<div class="cbox">   <input type="checkbox" id="check"/>   <label for="check">Checkbox</label> </div>

<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 .cbox input { display: none; } .cbox input:checked ~ label::before { content: "\2605"; }

THE CSS (PART A)

02

CHECKBOX SQUARE .cbox label::before {   content: "\00a0"; display: inline-block;   width: 25px; margin-right: 5px;   text-align: center; background: #f2f2f2; }

COSMETICS .cbox {   font-size: 18px; line-height: 20px;   margin: 10px;  } .cbox label { cursor: pointer; } .cbox label:hover::before { background: #ddd; } .cbox input:disabled ~ label { color: #aaa; } .cbox input:disabled ~ label::before { background: #ccc; }

THE CSS (PART B)

03