Fully Customizable Radio Buttons / Checkboxes with jQuery and CSS

Yet another jQuery plugin used to beautify the default checkboxes and radio buttons using CSS and javascript, no images required.

Basic Usage:

1. Include the required jQuery javascript library and jQuery checkradios plugin in the page.

<!-- The main styles for the checkradios plugin to provide default styles -->
<link rel="stylesheet" href="css/jquery.checkradios.css" type="text/css"/>

<!-- jQuery - Required to use the jQuery plugin (Obviously) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- Checkradios plugin -->
<script src="js/jquery.checkradios.js"></script>

2. Include Font Awesome fonts in the page. Not required unless you want to use custom icons within the checkboxes and radios.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

3. Create standard radio button and a checkbox.

<input type="checkbox" class="checkradios-fontawesome custom-style" checked/>
<input type="radio" class="checkradios-fontawesome custom-style" checked/>

4. The sample CSS to style the radio button and checkbox.

.custom-style {
font-size: 25px;
color: #FF0084;
border: 2px solid#FF0084;
-webkitbox-shadow: inset 0px 0.1em 0.1em rgba(0,0,0,0.3);
-moz-box-shadow: inset 0px 0.1em 0.1em rgba(0,0,0,0.3);
box-shadow: inset 0px 0.1em 0.1em rgba(0,0,0,0.3);
}

5. Call the plugin and add Font Awesome based icons to your radio button and checkbox.

$('.checkradios').checkradios({
	
checkbox: { 
iconClass:'fa fa-check-circle'
},
    
radio: {
iconClass:'fa fa-star'  
}

});

6. Callback function.

$('.checkradios').checkradios({
  
onChange: function (checked, $element, $realElement) {}

});

Change log:

2014-08-22

• Removed font icon conflicts

2014-03-22

• Updated tabbing to work with fontawsome icons
• Fixed bug causing focus to fire twice

---

This awesome jQuery plugin is developed by cosmicwheels. For more Advanced Usages, please check the demo page or visit the official website.