Custom Styling Checkbox and Radio buttons inputs with CSS
At the time of designing a website, as a designer, one of my favorite work is to customize the design of FORM elements, especially a radio button and checkbox with CSS.
Previously, when IE and Mozilla was dominating the WEB; FORM Elements were the most uninteresting, uninviting and inaccessible parts of the web. This is mostly because of the complexities that come at the time of styling FORM components, and overriding the browser defaults behavior.
But, thanks to Google Chrome; Our Browser industry changed and so, our old Browsers have also updated with new industry’s environment. Now, With a little extra markup of CSS, our form elements can be styled in almost any way, and be as accessible as we choose to make them – without any JavaScript.
FORM Elements – Checkbox and radio button
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
<input type="radio" /> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
<form> <input type="radio" name="gender" value="male" checked> Male <input type="radio" name="gender" value="female"> Female <input type="radio" name="gender" value="other"> Other </form>
<input type="checkbox"> defines a checkbox
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form> <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle2" value="Car"> I have a car </form>
Customized HTML for beautify the FORM elements
Here we will use custom icon of radio buttons and Checkbox using Font Awesome. Currently most of the designer are using this.
So, for new look and feel of our customized HTML for Radio buttons will be following.
<label class="btn active">
<input type="radio" name='gender3' checked>
<i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square fa-2x"></i>
<span> Male</span>
</label>
<label class="btn">
<input type="radio" name='gender3'>
<i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square fa-2x"></i><span> Female</span>
</label>
And, For beautify our Checkbox we will use:
<label class="btn active">
<input type="checkbox" name='email1' checked>
<i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i> <span> Marketing Email</span>
</label>
<label class="btn">
<input type="checkbox" name='email2'>
<i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> Alert Email</span>
</label>
<label class="btn">
<input type="checkbox" name='email3'>
<i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> Account Email</span>
</label>
Styling Checkbox / Radio buttons with CSS
As we know that, Applying appearance: none; to our select element resets any custom styling that browsers may add. We also have a -webkit- and -moz- prefix to ensure that some outdated browser version are covered.
We will link the CSS file of Font Awesome from CDN like below.
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
After, adding the fontawesome CSS we will customized the existing FORM as per requirement. For this custom styling CSS will be following.
label.btn span {
font-size: 1.5em;
}
label input[type="radio"] ~ i.fa.fa-circle-o,
label input[type="radio"] ~ i.fa.fa-square-o{
color: #7AA3CC; display: inline;
}
label input[type="radio"] ~ i.fa.fa-dot-circle-o,
label input[type="radio"] ~ i.fa.fa-check-square{
display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-circle-o,
label input[type="radio"]:checked ~ i.fa.fa-square-o{
display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o,
label input[type="radio"]:checked ~ i.fa.fa-check-square{
color: #7AA3CC; display: inline;
}
label:hover input[type="radio"] ~ i.fa {
color: #7AA3CC;
}
label input[type="checkbox"] ~ i.fa.fa-square-o{
color: #7AA3CC; display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-check-square-o,
label input[type="checkbox"]:checked ~ i.fa.fa-square-o{
display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o{
color:#7AA3CC; display: inline;
}
label:hover input[type="checkbox"] ~ i.fa {
color: #7AA3CC;
}
div[data-toggle="buttons"] label.active{
color: #7AA3CC;
}
div[data-toggle="buttons"] label {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 2em;
text-align: left;
white-space: nowrap;
vertical-align: top;
cursor: pointer;
background-color: none;
border: 0px solid #c8c8c8;
border-radius: 3px;
color: #c8c8c8;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
div[data-toggle="buttons"] label:hover {
color: #7AA3CC;
}
div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
-webkit-box-shadow: none;
box-shadow: none;
}
Result / Demo
That’s it..!!
That’s all, I hope you liked this article. Please feel free to comment and share your thoughts/ideas. Thanks for reading!
Dhiraj kumar is an Information Technology graduate who loves learning new things. A very popular and colorful individual, he has a particular passion for people, blogs, and the use of technology for social progress. He spends the whole day sitting in front of the computer, making himself updated with the new updates in technologies going on around him. He has more than 15 years of experience in the field of Website designing and Accessibility. He has a strong hand in Flash animation, 2D and 3D Presentation, UI web softwares in Flash with Action Scripting 2.0 / 3.0, Video Presentations, Flash Presentations, HTML, CSS, JavaScript, jQuery, Photoshop, 3Ds Max, Maya etc. read more..ALSO, TO SAVE BOTH OF US SOME TIME, YOU SHOULD KNOW THAT: Currently, I am not available for any type of freelance projects. Follow @dhiraj_kumarHTML5, CSS3 & jQuery - Web Design / Development
Leave a Reply