How To Easily Style Checkboxes and Radio Buttons

So you always wanted to create some fancy good looking checkboxes and radio buttons to make your page look eye catching. You searched a lot and ended up finding some nasty CSS code that you never wanted to implement manually.  There is another way of doing it using images (css sprites usually ) which should not be  followed as its not recommended to use images everywhere. So what else you can do? I have a solution for you to use a wonderful jQuery plugin named Checkradios by Chris McGuckin. This light weight jQuery plugin is very simple to integrate. It  also uses CSS to style your checkboxes and radio buttons but the benefit is you really don’t need to mess up with CSS just use its function to call this plugin and  the rest will be taken care of.

What else? This plugin integrates Font Awesome within it so you can style radio and checkbox elements in more better and attractive way by integrating different different font icons.

Official links for demo and download:

[button_round color=”blue” url=”www.rawgithub.com/cosmicwheels/jquery-checkradios/master/index.html”] LIVE DEMO [/button_round]          [button_round color=”blue” url=”www.github.com/cosmicwheels/jquery-checkradios/archive/master.zip”] Download [/button_round]

So you need to include jQuery file, Plugins file (js and css) and font-awesome.css to get going. Below is a little code that will implement checkradios plugin in radio and checkboxes:

</p>
$(document).ready(function(){
 $('.checkradios').checkradios();
 });

 </script>
 <div>
 <span>Styled Checkboxes and radios</span>
 <input type="checkbox" class="checkradios" checked/>
 <input type="radio" class="checkradios" checked/>
 </div>
<p style="text-align: justify;">

You can also change color of elements (custom styling) and integrate font icons. I recommend you to have a look at official demo of this plugin and download the sample file. You can easily customize style to match your website’s theme. Let me know in comments how do you style your checkboxes , radios or any other form element? Share this post with your friends and followers.