Back in 2015, I was experimenting with custom checkboxes using CSS only, but at the time I couldn’t figure out a cross-browser solution for checkboxes that I could easily use.

Alas! It is 2019 and I’ve redone the checkboxes with a pure CSS version using no background image to do the dirty work. You can simply drop this code into your webpage and the result will be nicely styled accessible checkboxes.

You can see a live example on Codepen here.

The output

Here’s what she’ll look like…

Custom Pure CSS Checkboxes using Sass

You’ll be able to customise the CSS to your hearts content, including the sizing, colours, spacing etc. I’ve provided this example as a boilerplate with nothing that should override your style-choices. You’ll need to:

  1. Copy the paste the HTML code.
  2. Added the Sass code and compile it into your processing tools.
  3. View the HTML file in a browser, woo!

The Markup

Copy and paste this example code into your document. You can leave the names and IDs as they are but you will need to modify these for your particular use-case when you’re ready.

HTML

The CSS (Sass)

Create a new .scss file (such as checkboxes.scss) and copy the Sass code into it from below. You can customise this to your requirements, but out of the box it should look like the above example.

That’s it! Easy peasy, lemon-squeazy!? If you enjoyed this article, give it a share and feel free to get in touch if you want to suggest improvements.

Thanks,
Andy