UI Design: Customize Checkboxes and Radio Buttons with CSS3

With CSS3 we can customize web presentations to be almost anything we want it to be. In this post, as the title says, we are going to customize the look of checkbox and radio input.

These two types of input are a few form elements that are a bit tricky to style (to achieve the same appearance across different platforms) – Windows, OS X and Linux have their own design to display these form elements.

If you want to customize these two form elements, then this tutorial is for you. So, let’s get started.

HTML Markup

We start off by creating a new HTML document. The HTML structure is as follows.

Radio Input

<div class="radio">
	<input id="male" type="radio" name="gender" value="male">
	<label for="male">Male</label>
	<input id="female" type="radio" name="gender" value="female">
	<label for="female">Female</label>
</div>

Checkbox Input

<div class="checkbox">
	<input id="check1" type="checkbox" name="check" value="check1">
	<label for="check1">Checkbox No. 1</label>
	<br>
	<input id="check2" type="checkbox" name="check" value="check2">
	<label for="check2">Checkbox No. 2</label>
</div>

CSS

We are done with the HTML structure, so now let’s put on the styles to these <input>. We will first customize the radio input type. The idea is to turn the default OS design to be as shown in the screenshot below.

Styling Radio Input

First of all, we turn the label cursor to a pointer to indicate that it is clickable then slot in other decorative styles.

label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 15px;
	font-size: 13px;
}

Then, we will hide the input radio type.

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

And we replace the hidden input radio type with the pseudo-element :before.

label:before {
	content: "";
	display: inline-block;

	width: 16px;
	height: 16px;

	margin-right: 10px;
	position: absolute;
	left: 0;
	bottom: 1px;
	background-color: #aaa;
	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

The styles above actually also apply to the checkbox input type. The only difference is that the radio input type is a circle. To achive the effect, we add border-radius with a radius size half of the height and width.

.radio label:before {
	border-radius: 8px;
}

Recommended Reading: Understanding pseudo-elements :before and :after

At this stage, here is how our radio input type looks like.

Now, we add the small circle inside when this input is checked. We will utilize the CSS3 :checked pseudo-class along with the Bullet HTML character (•). This bullet will be delivered through content property, thus we need to convert this HTML character for CSS with a Entity Conversion Tool.

input[type=radio]:checked + label:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}

So, when the input radio (which is hidden) is checked or selected, a smaller circle will appear, as shown in the following screenshot.

Alternatively, you can also use an image and show it through the background-image property in :before pseudo-element we have added previously. I didn’t use this as It is my preference to not use images, where possible.

Styling Checkbox Input

Now, we add styles to the checkbox input type. First, we also hide the input element.

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

Since we have replaced the input with :before pseudo-element before, we now simply add the border radius.

.checkbox label:before {
	border-radius: 3px;
}

Next we will add the checked sign the same way we did with the radio input type. This time we use Check Mark HTML Character (✓).

input[type=checkbox]:checked + label:before {
	content: "\2713";
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
	font-size: 15px;
	color: #f3f3f3;
	text-align: center;
    line-height: 15px;
}

And here is how our checkbox now looks like.

Final Thought

This is only one technique to customize checkbox and radio input type and certainly you can enhance the look to be more stunning. Also, Since we used CSS3 :checked, this technique will only work in browsers that support it. So, if you prefer, you can also use a jQuery Plugin.

Lastly, you can view the demo and download the source code from the links below.

• View Demo
• Download Source