Customize checkbox / radiobutton using css3

The topic explaining the way of getting a customized checkbox or radio button without additional Javascript libraries or images is covered.

The topic I’m going to talk about is not new but communicating with my colleagues lately I found out that it is not that clear for server side developers.
So I’m going to explain how to get a customized checkbox or radiobutton without usage of additional javascript libraries or images.

Let’s start!

I’m going to follow BEM methodology and use SCSS, however there is a link to the demo on CodePen, so if it’s needed you will be able to check generated css.

demo
Live Demo on CodePen

As a first step let’s consider our html markup.
We have a minimal amount of tags to verify customization and appropriate work: simple html form, legend, a checkbox and two radiobuttons.

We all know that labels in form can be attached to input fields. In case of radiobuttons and checkboxes it would be the base of our customization since a click on label would cause change event on attached input. We are going to hide the input and style the labels so they would mimic input appearance.

I’m going to store all used colors in scss variables

And add some style to make labels look pretty

We hide the inputs and prepare the base for checkbox using :before and :after pseudo elements.
Here you can apply any desired styles, dimensions and colors.

Using pseudo element :after we can mimic checkbox tick. Of course it should be applied only to checkboxes which are checked.

Basically we are done!
We can use a similar approach to radiobuttons but we’ll need to change tick styles.
Here it is:

I hope you found this useful!