Custom checkbox that works with all browsers, web testing frameworks as well as accessibility tools like Chrome Vox.

Checkbox.css

.custom-checkbox input[type="checkbox"] {
    display: inline-block;
    width: 20px;
    height: 20px;
    /*hide the actual checkbox, but dont do a display none because that breaks a ton of stuff like testing frameworks*/
    opacity: 0.01;
    filter: alpha(opacity=0.01);
    cursor: pointer;
}

.custom-checkbox {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url(../../images/checkbox.png) 0 20px;
    cursor: pointer;
}

.custom-checked {
    background: url(../../images/checkbox.png) 0 0px;
    cursor: pointer;
}

/*retina icons*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .custom-checkbox {
        background: url(../../images/[email protected]) no-repeat;
        background-size: 20px 20px;
    }
}

Checkbox.js

var controls = controls || {};

controls.checkbox = (function () {

  //safari seems to have issues updating the look and feel when using jquery to modify css classes
  var _redraw = function () {
    $('body').addClass('redraw').removeClass('redraw');
  };
  
  (function initialize() {
    //find all custom checkboxes that are already checked and add the checked class
    $('.custom-checkbox input:checked').toggleClass('custom-checked');
    _redraw();
    
    //on change of the checkbox, toggle the checked class
    $(document).on('change', '.custom-checkbox input[type="checkbox"]', function () {
      $(this).parent().toggleClass('custom-checked');
      // safari mac repaint fix
      _redraw();
    });

  }); // initialization immediate function call
});

Example.html

<div class="custom-checkbox">
  <input type="checkbox" />
</div>