Zebra_TransForm, a tiny jQuery plugin for replacing checkboxes, radio buttons and select boxes

Attempting to use CSS only to style check boxes, select boxes and radio buttons in order to achieve the same look and feel across browsers and operating systems it’s a lost cause: it simply cannot be done. In order to consistently style these form controls cross browser, we will use a combination of CSS and jQuery.

Zebra_TransForm is a tiny (around 5KB minified) plugin for jQuery for styling the appearance of check boxes, radio buttons and select boxes without sacrificing functionality and accessibility. This jQuery plugin works by overlaying stylable elements over the native controls. It works in sync with the form’s original elements copying the attached event handlers, preserving the tabindex, giving visual feedback when focused, being accessible via keyboard, and looking and behaving in the same way in all major browsers – Firefox, Chrome, Safari, Opera and Internet Explorer 7+ (in IE6 it will not replace original elements). And it will also work with responsive layouts!



Zebra_TransForm has no dependencies other than jQuery 1.7.1+


How to use

Zebra_Transform is available as an npm package. To install it, use:

npm install zebra_transform

Zebra_Transform is also available as a Bower package. To install it, use:

bower install zebra_transform

load the latest version of jQuery from a CDN and provide a fallback to a local source, like:

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-1.12.0.js"><\/script>')</script>

Load the Zebra_TransForm plugin

<script type="text/javascript" src="path/to/zebra_transform.js"></script>

Load the plugin’s CSS file

<link rel="stylesheet" href="path/to/zebra_transform.css" type="text/css">

Now, within the DOM-ready event do

$(document).ready(function() {

    // style all checkboxes, radio buttons and selects on the page
    var transform = new $.Zebra_TransForm();

    // unless you're planning on using the "update" method
    // you can instantiate the plugin without the "new" keyword
    // and without assigning it to a variable:

    // style checkboxes only

    // style checkboxes and radio buttons only
    $.Zebra_TransForm($('input[type="checkbox"], input[type="radio"]'));

    // style checkboxes, radio buttons and selects (same as first example)
    $.Zebra_TransForm($('input[type="checkbox"], input[type="radio"], select'));

    // style checkboxes of a specific parent
    $.Zebra_TransForm($('#element input[type="checkbox"]'));

    // style only a specific element

    // if you plan on reverting elements to their original state
    // you must instantiate the plugin with the "new" keyword
    // and assign it to a variable
    var zt = new $.Zebra_TransForm();

    // revert elements to their original state



Here are some checkboxes, radio buttons and a select box styled with Zebra_TransForm

CheckboxesFirst item is both disabled and checked

Radio buttonsFirst item is disabled

Select boxPadding also works in IE7



All parameters are optional.

style_disabled_labels boolean

If set to true, labels attached to disabled checkboxes and radio buttons will also be styled to look disabled. 

Default is TRUE

Public methods


Call this method if you plan on reverting elements to their original state 



version 2.4.5

If you find this library to be useful to you, you can support the author by donating a small amount via PayPal:


Alternatively, you could show your support by starring this library on GitHub

Zebra_TransForm is distributed under the LGPL.

In plain English, this means that you have the right to view and to modify the source code of this software, but if you modify and distribute it, you are required to license your copy under a LGPL-compatible license, and to make the entire source code of your derivation available to anybody you distribute the software to.

You also have the right to use this software together with software that has different licensing terms (including, but not limited to, commercial and closed-source software), and distribute the combined software, as long as state that your software contains portions licensed under the LGPL license, and provide information about where the LGPL licensed software can be downloaded.

If you distribute copies of this software you may not change the copyright or license of this software.



Click on a version to expand/collapse information.

version 2.4.5 (January 26, 2016)
version 2.4.4 (January 20, 2016)
  • better integration with Bower
version 2.4.3 (January 16, 2016)
  • the library now behaves correctly upon clicking a form’s “reset” button; thanks to Dan for suggesting this
  • fixed a bug where resizing the window would render all transformed elements unusable
  • some minor code optimizations
  • the library is now available as a Bower package
  • added integration with Grunt for automating JSHint & Uglify processes
version 2.4.2 (September 28, 2013)
  • updated jQuery version to 1.10.2 and fixed a typo in the manifest file
version 2.4.1 (August 16, 2013)
  • fixed a bug introduced in the previous list where resizing the window would brake the plugin
  • fixed an older bug where event handlers were attached to the original element over and over again upon the updates that occur when the window is resized
  • dropped the “update” public method
  • added a new “remove” public method, used for reverting replaced elements to their initial state
  • performance tweaks and code refactoring;
  • updated source code so JSHint is now (almost completely) happy;
version 2.4.0 (July 24, 2013)
  • fixed a bug introduced in the previous version due to which event handlers attached to the original elements got lost when replaced by the plugin
  • fixed a bug where event handlers attached by the user were executed *before* the event handlers attached by the plugin; this was especially troublesome with radio buttons and checkboxes where if one had an event handler for the click event for checking the state of the element, the response was always incorrect
  • fixed an issue where the selected value of a drop-down text would wrap if there was not enough space for it to fit in
  • fixed an issue where the selected value of a drop-down text would go under the drop-down’s “arrow” if it was too long
  • fixed another bug introduced in the previous release where radio buttons and checkboxes having right or top margin were not correctly replaced
  • fixed a few things as indicated by JSFiddle’s JSHint; thanks to Alex Alexandrescu for suggesting
  • increased overall performance
  • changed the look of the select box so it should now be more obvious that select boxes can be styled; thanks Sebastian Popa for suggesting
  • minimum required jQuery version is now 1.7.1
version 2.3.3 (July 10, 2013)
  • added some new keywords to be used in the jQuery Plugin Registry
version 2.3.2 (July 09, 2013)
  • changed the way the replacement elements are placed which are now relative to the parent element;
  • fixed a bug when select boxes would have their width specified in percents;
  • fixed a bug where the background of replacement select boxes was always transparent; now it copies the original select box’s background;
  • fixed a small bug with the placement of the arrow for select boxes in Safari;
  • the project is now also available on GitHub
version 2.3.1 (January 28, 2013)
  • fixed an issue due to which the plugin was not working with jQuery 1.9.0;
version 2.3 (August 14, 2012)
  • elements created by the plugin will now also copy the original elements’ events which, when triggered, will run in the context of the original element – so this will be the original element rather than the replacement; for example, a “click” event attached to an checkbox will also be triggered when clicking the replacement element; thanks to Jesse;
version 2.2 (July 21, 2012)
  • fixed a bug due to which the “update” method was not working
  • better support for select boxes in all browsers
  • many performance tweaks
version 2.1 (February 19, 2012)
  • fixed a bug with select boxes not being correctly replaced on Chrome
version 2.0.1 (August 07, 2011)
  • fixed a bug with the update method. thanks Michael
version 2.0 (July 19, 2011)
  • fixed a bug where the plugin was not updating in real time the selected value of a selected box, if the value was selected by pressing the ENTER key
  • fixed a bug where in IE7 horizontal padding was not taken into account for select boxes
  • fixed a bug where disabled select boxes were not styled
  • fixed a bug where select box replacements were not replicating the original select box’s font styles
  • fixed a bug where floated select boxes were incorrectly replaced
  • fixed a bug where margins of the replaced elements were not taken into account
  • fixed a bug where select boxes were not properly styled on Safari
version 1.0 (July 10, 2011)
  • initial release


64 thoughts on “Zebra_TransForm, a tiny jQuery plugin for replacing checkboxes, radio buttons and select boxes

  1. Martijn

    I haven’t tested this thouroghly, but I think stylish checkbox and radiobuttons can be achieved in pure css. It probably wouldn’t work in IE7, that we can mitigate with a script.

    1. Stefan Gabos Post author

      check boxes and radio buttons can indeed be styled using only CSS3 but as far as Internet Explorer is concerned, it will work only in IE8+

  2. Makr

    I’m having an issue in IE8 doing:
    var zebra = new $.Zebra_TransForm();

    IE9 in IE8 mode produces “SCRIPT438: Object doesn’t support property or method ‘propertychange’ zebra_transform.js, line 2 character 1374”

  3. tom

    I’d love to us this, but it doesn’t work with ’em-scaling’. or instance, add ‘style=”font-size:5em” to the example body tag. The text scales (and the positioning(yea!)). But the checkboxes/radio boxes etc. do not. In my case I have a scalable widget which I want to drive with font-sizes from 0.2em to 4em.

    1. Stefan Gabos Post author

      what kind of issues? I just tried it with jQuery 1.9.0 and IE7 and it worked ok

  4. Russ

    Thank you for this plugin!!! I have a small issue:

    update_checkbox: function () {
      if ($(".zebra").length > 0) {
        self.checkboxes.refresh() <<-????
    init_ih_checkbox: function () {
      if ($(".Zebra_TransForm_Checkbox").length == 0) {
        self.checkboxes =  new  $.Zebra_TransForm($('input[type="checkbox"].zebra'));

    For some reason my ui is not updating when I change the value of my checkbox programmatically… I would like to force the ui to update or refresh some how…

    What is the best way

    1. Stefan Gabos Post author

      i think you are right, there’s no way for handling that. i’ll look into it and come up with a fix this weekend. thanks!

    2. Stefan Gabos Post author

      the fix is to trigger the “change” event after manually checking a radio button; so, something like

      $('#somecheckbox').attr('checked', 'checked').trigger('change');
    3. Russ

      Thanks for the direction! After playing around for a while it turn out that you were right and I had an implementation detail that was getting in the way.

      Cheers!! and thanks again!

  5. Rich

    All works great but when the transform is active the form no longer sends the checkbox values, any ideas?

    Using jQuery 1.8.2

    Cheers and keep up the good work!

    1. Stefan Gabos Post author

      I tried it in test version of Safari, Opera, Chrome, Firefox and as well as in IE7, 8, 9 & 10 and it worked everywhere…have you tried it with the examples from the downloadable package?

  6. Rich


    I’ve just sent a message, further to that.

    It works when you click on the label, just not the checkbox itself.



  7. Elvis


    Would it be possible to see a version without select boxes replacement? I would love to use it for radio/checkboxes only, but I already use another solution (Chosen) for select boxes which I can’t replace.


    1. Stefan Gabos Post author
      $.Zebra_TransForm($('input[type="checkbox"], input[type="radio"]'));
  8. dnes

    i want to have my own custom theme. could you please help me, i cannot find the image you have used i.e sprite.png

  9. Dave

    I have a really stange issue on Chrome on Android – the checkboxes work initially, but if I scoll down/up then try and re-click them, they fail.

    It does not occur on this page however.

    It’s not a major problem, as I only need to style ‘selects’, but it would be nice to solve!

  10. Dan

    Hi Stefan,

    The transformed checkboxes do not change to the unchecked state when a reset button in the form is clicked – although the data in the DOM is cleared as expected (no data is posted on submit)

    Is there a way to clear the checked state when a reset button is pressed?



    1. Dan

      Hi Stefan,

      Found a solution, trigger change event on all checked elements:

      // update when reset button pressed
      $('button[type="reset"]').on( "click", function() {

      Sorry to bother you!


Leave a Reply

Your email address will not be published. Required fields are marked *