Style Checkboxes and Radio Buttons

In this tutorial we are going to show you how to style checkboxes and radio buttons using only CSS code. By customizing these two elements, you’ll be able to keep your webpage colors and styles consistent with other elements on your page. The way we style the checkbox and radio button is by making the two elements invisible and then using CSS to create a new checkbox or radio button.

We’ll also be using the pseudo class :checked to alter our buttons to become selected or not. Take a look at the following images and I’m sure you will agree that the styled elements look better than the default ones.

Before:

After:

Ok, lets get down to the code and see how the achieve this effect.
Firstly we will use the following HTML code:

<!--Code for Radio Buttons-->
<input type="radio" id="rb1" name="rb" value="" checked>
<label for="rb1">Australia</label><br>
<input type="radio" id="rb2" name="rb"value="">
<label for="rb2">England</label><br>
<input type="radio" id="rb3" name="rb" value="">
<label for="rb3">United States</label>

<!--Code for Checkbox-->
<input type="checkbox" id="cb1" name="cb" value="">
<label for="cb1">Australia</label><br>
<input type="checkbox" id="cb2" name="cb"value="" checked>
<label for="cb2">England</label><br>
<input type="checkbox" id="cb3" name="cb" value="">
<label for="cb3">United States</label>

The above code will display three radio buttons and three checkboxes, obviously you can add more but you will need to keep the name the same for your radio buttons or checkboxes.
That’s basically all we need for the HTML, now lets get on with the CSS to style each element. We’ll break the CSS down into three sections and explain each one.

Step 1

input[type=radio], input[type=checkbox] {
    display:none;
}

This first section is pretty straight forward, what we are doing here is making sure that our un-styled radio and checkbox will not be displayed.

Step 2

input[type=radio] + label:before {
    content: "";  
    display: inline-block;  
    width: 15px;  
    height: 15px;  
    vertical-align:middle;
    margin-right: 8px;  
    background-color: #aaa;  
    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
    border-radius: 8px;  
}
input[type=checkbox] + label:before {
    content: "";  
    display: inline-block;  
    width: 15px;  
    height: 15px;  
    vertical-align:middle;
    margin-right: 8px;  
    background-color: #aaa;  
    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
    border-radius: 4px;  
}

Now that our default buttons are hidden, we need to draw new buttons for the user to click on. The :before pseudo class is used to create our new image before the HTML label tag. We’ll now look at the main properties used in this section.
content: – We don’t want anything displayed before the label.
display: – Our new checkbox/radio will be displayed inline-block.
vertical-align: – We need this property to keep the new checkbox/radio aligned with our text.
margin-right: – Space between the checkbox/radio and the label.
box-shadow: – Lets give our new checkbox/radio an inset shadow to soften the edges.
border-radius: – Here we will make our radio button into a circle and the checkbox will have slightly rounded corners.

Step 3

input[type=radio]:checked + label:before {
    content: "\2022"; /* Bullet */
    color:white;
    background-color: #666; 
    font-size:1.8em;
    text-align:center;
    line-height:14px;
    text-shadow:0px 0px 3px #eee;
}
input[type=checkbox]:checked + label:before {
    content:"\2714"; /* Tick */
    color:white;
    background-color: #666; 
    text-align:center;
    line-height:15px;
    text-shadow:0px 0px 3px #eee;
}

The last section is needed to display that the user has selected a checkbox/radio button. Once selected the checkbox/radio button will have either a ‘tick’ or ‘bullet’ image display. Here we also use the :checked pseudo class which will work in all modern web browsers, older browsers will not work.
content: – To show that we selected the button, we display either a ‘tick’ or ‘bullet’ image.
text-align: – Here we will center the above ‘tick’ or ‘bullet’ (Horizontally).
line-height: – Used to center the ‘tick’ or ‘bullet’ (Vertically).

That’s all that is needed to style our checkbox and radio buttons, we have only shown how to create our own box or circle, but you can also use an image to style these elements.

If you want to check out a demo and play around with it a bit, just click on the button below.

Demo

About Rene Spronk

G'Day, My name is Rene Spronk and I am the owner of CSSPortal.com.