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.

Custom-Styling-Checkbox-and-Radio-buttons-inputs-with-CSS

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

view 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!

You may also like:

You may also like:

You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLMobile Web TechnologyTutorialsadvance web technology,Beautiful Form,bootstrap,checkbox,CSS,CSS 3,CSS 4,CSS trick,css3,custom fonts,custom input,custom input format,Font Awesome,FORM,Google Font API,graphical user interface,html basics,html form placeholder textarea,input attribute placeholder,input element,INPUT elements,input placeholder,input type radio,input type text,input types,page elements,radio button css,Styling FORM Element,web fonts,web fonts solutionAt 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...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.