A simple, styled checkbox

Published: 13 December 2022

A simple method for styling checkboxes without resorting to non-native solutions.

The checkbox group below:

• Uses native <input> elements with a type of checkbox and programatically associated <label> elements.
• Has a styled checkbox that is larger an easier to click than the default-sized checkbox.
• Is achieved by positioning a pseudo-element over the top of the default checkbox, and making sure all functionality still works.
• Has all measurements defined in em units so all aspects of the layout will scale together.
• Works with short or long lines of content for the label (even though labels should not be as long as the example below).
• Has states defined for:
  • :hover
  • :focus
  • :checked
  • :checked + :focus

Example

<div class="checkbox-container">
  <input class="checkbox-input" id="frogs" type="checkbox">
  <label class="checkbox-label" for="frogs">Frogs</label>
</div>

CodePen demo