.checkbox
class allows you to set quick and default checkbox and radio input style.
Note:
Add the checkbox label next to checkbox input
.checkbox
checkbox with checkmark.radio
radio input with bullet.checkbox-bullet
checkbox with bullet.checkbox-round
round checkbox with checkmark <div><input type="checkbox" class="checkbox" id="choice-1"/> <label for="choice-1"><span class="fs-s2">Checkbox</span></label></div>
<div><input type="radio" class="radio" id="choice-2"/> <label for="choice-2"><span class="fs-s2">Radio</span></label></div>
<div><input type="checkbox" class="checkbox-bullet" id="choice-3"/> <label for="choice-3"><span class="fs-s2">Bullet Checkbox</span></label></div>
<div><input type="checkbox" class="checkbox-round" id="choice-4"/> <label for="choice-4"><span class="fs-s2">Round Checkbox</span></label></div>
<input type="checkbox" class="checkbox" id="choice" disabled/>
<label for="choice">
<span class="fs-s2">Disabled Checkbox</span>
</label>
<input type="checkbox" class="checkbox" id="choice" checked disabled/>
<label for="choice">
<span class="fs-s2">Checked Disabled Checkbox</span>
</label>
Add color class to label and checkbox inherit the color of label. And if you want to change the color of checkbox only than change the color of text
<input type="checkbox" class="checkbox" id="color-1"/>
<label for="color-1" class="blue">
<span class="fs-s2">Checkbox</span>
</label>
<input type="checkbox" class="checkbox" id="color-2"/>
<label for="color-2" class="indigo">
<span class="fs-s2 gray">Checkbox</span>
</label>