jQuery Checkbox and Radio Button Styling

I spent a lot of time searching for a cross-browser checkbox  and radio button script. Many scripts do not work in all browser, or does not support keyboard input. This amazing script is written by elclanrs and can be downloaded from github.

Support:  IE8+, Webkit, Firfox, Opera, iOS5+, Android 4.0+.
jQuery: 1.7+
License: MIT

HTML markup

The script has to be after the input fields!

<label><input type="checkbox"/>Checkbox 1</label><br/>
<label><input type="checkbox"/>Checkbox 2</label><br/>
<label><input type="radio" />Radio 1</label><br/>
<label><input type="radio" />Radio 2</label>

<script type="text/javascript">
	$('input[type=checkbox], input[type=radio]').customRadioCheck();
</script>

jQuery

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
/*
 * customRadioCheck: jQuery plguin for checkbox and radio replacement
 * Usage: $('input[type=checkbox], input[type=radio]').customRadioCheck();
 * Author: Cedric Ruiz
 * License: MIT
*/
;(function(){
$.fn.customRadioCheck = function() {

  return this.each(function() {

    var $this = $(this);
    var $span = $('<span/>');

    $span.addClass('custom-'+ ($this.is(':checkbox') ? 'check' : 'radio'));
    $this.is(':checked') && $span.addClass('checked'); // init
    $span.insertAfter($this);

    $this.parent('label').addClass('custom-label')
      .attr('onclick', ''); // Fix clicking label in iOS
    // hide by shifting left
    $this.css({ position: 'absolute', left: '-9999px' });

    // Events
    $this.on({
      change: function() {
        if ($this.is(':radio')) {
          $this.parent().siblings('label')
            .find('.custom-radio').removeClass('checked');
        }
        $span.toggleClass('checked', $this.is(':checked'));
      },
      focus: function() { $span.addClass('focus'); },
      blur: function() { $span.removeClass('focus'); }
    });
  });
};
}());
</script>

CSS

Add some style to the checkboxes, radios and labels.

<style type="text/css">
/*
 * customRadioCheck: jQuery plugin for checkbox and radio replacement
 * Usage: $('input[type=checkbox], input[type=radio]').customRadioCheck();
 * Author: Cedric Ruiz
 * License: MIT
*/
.custom-label {
  display: inline-block;
  margin-right: .8em;
  cursor: pointer;
}
.custom-radio,
.custom-check {
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: -.15em; /* Adjust to for best fit */
    margin: 0 .4em;
    width: 20px;
    height: 20px;
    background: url(img/customRadioCheck.png) 0 0 no-repeat;
}
.custom-radio { background-position: 0 -20px; }
.custom-check.focus { background-position: -20px 0; }
.custom-radio.focus { background-position: -20px -20px; }
.custom-check.checked { background-position: -40px 0; }
.custom-radio.checked { background-position: -40px -20px; }
.custom-check.checked.focus { background-position: -60px 0; }
.custom-radio.checked.focus { background-position: -60px -20px; }
</style>

Image

This image is required for the script, download it.

 

Demo »


Go Daddy


Related articles

Unordered List Style Image CSS

Unordered List Style Image CSS

06/03/2013

Learn how to style UL with any image using CSS.

OL and UL List CSS Style

OL and UL List CSS Style

03/03/2013

Styling ordered and unordered lists is easy. Just write a single line of CSS to change the list style type.

Pie Chart with Flot jQuery Plugin

Pie Chart with Flot jQuery Plugin

28/02/2013

Learn how to use the pie plugin for Flot charts.


3 comments

Kristian Atanasov2014-06-20 12:51

Just had a similar problem to Nikolay\'s and his solution worked like a charm!

Nikolay Mihaylov2013-05-16 00:25

Hey again, sorry for the second comment, but i noticed that this function is missing a default state for checked attribute. Adding this will visualize correctly the default checked item: if($this.is(':checked')) { $span.addClass('checked'); } :)

Nikolay Mihaylov2013-05-15 23:57

Hello, i really liked your idea and i played a bit with the function. However i tried with a different html markup (in my case i had each radio button in separate ). With your suggestion using .siblings('label') it was not possible to make it work. Here is my suggestion, of course its nothing special but works with any html markup: if ($this.is(':radio')) { $('input[name='+$this.attr('name')+']').next().removeClass('checked'); } I'm selecting the by the name attribute since its vital for radios :)

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the apple *


Find us on Facebook

Tags

Get online with the world's Best - GoDaddy.com!

Back to Top