Custom checkboxes with CSS

Along similar lines to this post on radio controls in forms, we can simply style checkboxes by using :after or :before pseudo-elements on the controls label.

The HTML

 <input type="checkbox" class="form__checkbox" id="checkbox1" />
 <label for="checkbox1" class="my-label">Checkbox 1</label>

SCSS

 &:checked + .my-label:before {
   // the on styling for the box, using a url for a tick
   content: url( ... );
 }

.my-label {
 ...
 &:before {
  // The 'unchecked' styling for the box
  ...
 }
}
Screenshot of unchecked checkbox demo
Unchecked checkboxes
Screenshot of checked checkbox demo
Checked checkbox

See it in action with this CodePen demo.

Leave a Reply

Your email address will not be published. Required fields are marked *