Custom radio buttons with CSS

Using a combination of :after and :before selectors on the controls <label> to position pseudo-elements over the real form control.

This selector lets us use the :checked state of the element to apply a style to the controls label:


  // SCSS
  .checkbox:checked + .checkbox-label:after {
    // ... adds a 'spot' to indicate checked status
  }

We then also need to make sure we handle focus on the control so that our fancy styling can also indicate state on keyboard navigation:


  // SCSS
  .checkbox:focus + .checkbox-label:before{
    // ... add some styling to indicate focus/keyboard nav
  }

Here’s a demo of solution on CodePen

Customise radio buttons with only CSS

Dev notes

I’m not a huge fan of heavily customised form elements due to the huge variety of implementations of form controls on different devices. For example, how <select> elements are handled on mobile vs. desktop. Avoid the pain of trying to fix countless display bugs and keep your form customisation as simple as possible.

Leave a Reply

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