Creating Checkbox and Radio Button with CSS

In HTML, form elements are by default creates a design that depends on operating system and browser. There is no easy way for designers to change those elements look and feel. This is really annoying for most designers who want to change the style of those form elements. In this tutorial, today we are going to show you a simple trick to make a custom checkbox and radio buttons with CSS. Let’s see!

Checkbox Styling

Create an HTML, just copy and paste the following code block.

In this markup, we have a section block and it contain three checkboxes with wrapping a div, that has a container class. After input tag, we add a label tag with a child span tag. This is our basic markup for our example. We will apply the same markup for radio button below. Now let’s start the styling.
Firstly, we need to hide our checkbox and forgot about it to make our checkbox element look great. Just apply the display property and set the value to none.

After hiding the checkbox, there is the only way to access it by using a label tag and for working properly, we set a for attribute on it and the value of this attribute is the similar value of corresponding input tag id attribute. Let’s see, our first checkbox id is checkbox-1, so that the for attribute value should be checkbox-1.

Using the ::before and ::after pseudo-element, we are going to style our checkbox element. Set the position property with a relative value for label tag.

And also set the position property with absolute value for span tag’s ::before and ::after pseudo element with some other necessary properties.

To create a centered horizontal position just set the top and bottom properties to zero and margin to auto.

The last rule is the most tricky and important for this technique. Here we use :checked pseudo-class that allows us to make changes the element when the input is checked. Then we use a “+” selector to choose our next sibling element, and target checkbox class and apply a new rule on ::after pseudo element.

Please see the full example in codepen –

See the Pen Creating Custom Checkboxes with CSS by Pavel (@bdpavel) on CodePen.0

Radio Styling

All technique are same as checkbox styling. Setup your markup with just copy and paste the following code block.

The same markup for radio button above we use already. Just changed the element to a radio instead of the checkbox and also change the class checkbox to the radio. Now let’s start the styling.

Firstly, we need to hide our radio element and forgot about it to make our it look great. Just apply the display property and set the value to none.

After hiding the radio, there is the only way to access it by using a label tag and for working properly, we set a for attribute on it and the value of this attribute is the similar value of corresponding input tag id attribute. Let’s see, our first radio id is radio-1, so that the for attribute value should be radio-1.

Using the ::before and ::after pseudo-element, we are going to style our radio element. Set the position property with a relative value for label tag.

And also set the position property with absolute value for span tag’s ::before and ::after pseudo element with some other necessary properties.

To create a centered horizontal position just set the top and bottom properties to zero and margin to auto.

The last rule is the most tricky and important for this technique. Here we use :checked pseudo-class that allows us to make changes the element when the input is checked. Then we use a “+” selector to choose our next sibling element, and target checkbox class and apply a new rule on ::after pseudo element.

Please see the full example in codepen –

See the Pen Creating Custom Radio Buttons with CSS by Pavel (@bdpavel) on CodePen.0

 

That’s all for today! Enjoy this tutorial and have fun! Thanks for being with CSS Animation team.