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 3KB 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 events attached to these, 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 6+

Top

Requirements

Zebra_TransForm has no dependencies other than jQuery.

I’ve only tested with jQuery 1.5.2 but it may work in earlier versions, too. If you can test, please let me know. Thanks!

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 using the plugin's "update" method
    // you must instantiate the plugin with the "new" keyword
    // and assign it to a variable
    var transform = new $.Zebra_TransForm();

    // call the plugin's "update" method
    transform.update();

});

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

update  

If you dynamically add or enable/disable controls, call this method to update the elements’ style. Takes as argument a jQuery object or a collection of jQuery objects as returned by jQuery’s selector engine. 

Top 

Download

version 2.3.1 (zip, 55.9Kb)
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 thas 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.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

46 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

Leave a Reply

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