Styled HTML Checkboxes

Styled HTML Checkboxes

Published: July 26, 2018

Last updated: December 16, 2018

Cross-browser styling for native HTML checkboxes.

Pattern Demos

Visually Hidden Checkboxes

Option 1

Option 2
(this option is disabled)

Option 3 is required

Single Element Checkboxes

Option 1

Option 2
(this option is disabled)

Option 3 is required

Pattern Details

Pattern Markup: Visually Hidden Checkbox
<!– visually hidden –>
<div class=”c-cb”>
<input type=”checkbox” id=”c_input_1″ checked>
<label for=”c_input_1″>
Option 1
</label>
</div>

Pattern Markup: Restyled Checkbox
<!– restyled input –>
<div class=”s-cb”>
<input type=”checkbox” id=”s_input_1″ checked>
<label for=”s_input_1″>
Option 1
</label>
</div>

When customizing any form [...]

Read article at scottaohara.github.io

Article Taxonomies

Categories: Terms: , , , , , ,