Tweet

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

Get the latest updates on this jQuery plugin via RSS

• Latest version
  2.3.1
  released on
  January 28, 2012
• 1. Overview
• 2. Requirements
• 3. How to use
• 4. Configuration
• 5. Download
• 6. Changelog
• 7. Comments

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+

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!

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

Configuration

All parameters are optional.

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:

You may also like:

• jQuery Plugin Boilerplate
• Zebra_Accordion, a tiny accordion jQuery plugin
• Zebra_Cookie, an extremely small jQuery plugin for writing, reading and deleting cookies
• Zebra_Datepicker, a lightweight datepicker jQuery plugin
• Zebra_Dialog, a lightweight dialog box jQuery plugin
• Zebra_Tooltips, a lightweight tooltips jQuery plugin
• Zebra_TransForm, a tiny jQuery plugin for replacing checkboxes, radio buttons and selects

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

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

Leave this field blank

Name*

Email*

Your email address will not be published

Website

Message*

You can use <strong>, <em>, <a>, <img>, <code>

Get a new code

Enter the characters that stand out in the image above

Characters are not case-sensitive