Web 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.
via hongkiat.com http://www.hongkiat.com/blog/css3-checkbox-radio/