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

Get the latest updates on this jQuery plugin via RSS

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!

Top

Requirements

Zebra_TransForm has no dependencies other than jQuery 1.7.1+

Top

How to use

First, load the latest version of jQuery either from a local source or from a CDN.

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:
    $.Zebra_TransForm();

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

    // 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
    $.Zebra_TransForm($('#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
    transform.remove();

});

Demo

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

Top

Configuration

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

remove  

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

Top 

Download

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

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.


You may also like:

Top

Changelog

Click on a version to expand/collapse information.

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

Top

60 responses to “Zebra_TransForm, a tiny jQuery plugin for replacing checkboxes, radio buttons and select boxes”

Follow the comments via RSS
  • Martijn, 2012-12-20, 16:36

    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.

    Reply
    • Stefan Gabos, 2012-12-21, 08:10

      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+

  • Makr, 2013-01-25, 16:52

    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″

    Reply
    • Stefan Gabos, 2013-01-26, 11:20

      for what version of jQuery?

  • tom, 2013-03-29, 22:47

    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.

    Reply
    • Stefan Gabos, 2013-04-01, 09:56

      did you try using the plugin’s “refresh” method?

  • Dragos, 2013-04-08, 14:28

    I had an issue with jQuery versions other than 1.7.0 on IE8. Gotta love IE.

    Reply
    • Stefan Gabos, 2013-04-08, 18:14

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

  • Russ, 2013-10-17, 00:57

    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

    Reply
    • Stefan Gabos, 2013-10-17, 10:12

      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!

    • Stefan Gabos, 2013-10-18, 17:48

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

      $('#somecheckbox').attr('checked', 'checked').trigger('change');
    • Russ, 2013-10-23, 17:15

      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!

  • Rich, 2013-11-04, 19:20

    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!

    Reply
    • Rich, 2013-11-04, 19:23

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

      Cheers

      Rich

    • Stefan Gabos, 2013-11-05, 23:10

      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?

  • Rich, 2013-11-04, 19:22

    Stefan

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

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

    Cheers

    Rich

    Reply
  • Elvis, 2014-03-11, 16:29

    Hi!

    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.

    Regards!

    Reply
    • Stefan Gabos, 2014-03-11, 16:56
      $.Zebra_TransForm($('input[type="checkbox"], input[type="radio"]'));
  • dnes, 2014-03-12, 08:40

    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

    Reply
  • dnes, 2014-03-12, 08:45

    got it thanks

    Reply
  • Vitalii, 2014-03-18, 05:32

    Hi Stefan,
    After window resize plugin won’t work.

    Reply
    • Stefan Gabos, 2014-03-22, 19:19

      it can’t confirm that…

Leave a Reply

Your email address will not be published
You can use <strong>, <em>, <a>, <img>, <code>
Characters are not case-sensitive