A tiny jQuery plugin for replacing and beautifying checkboxes, radio buttons, and select boxes in IE7+
This plugin is mainly intended to be used for styling checkboxes, radio buttons and select boxes in older versions of Internet Explorer, like IE7 and IE8, but it can also be used in other browser if you want to consistently style these form controls cross browser.
Zebra TransForm is a tiny (~5KB minified) jQuery plugin 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 – Chrome, Firefox, Safari, Edge, Opera and Internet Explorer 7+ (in IE6 it will not replace original elements).
See the demos
Zebra TransForm has no dependencies other than jQuery 1.7.1+
Zebra TransForm is available as an npm package. To install it use:
# the "--save" argument adds the plugin as a dependency in packages.jsonnpm install zebra_transform --save
Zebra TransForm is also available as a Bower package. To install it use:
# the "--save" argument adds the plugin as a dependency in bower.jsonbower install zebra_transform --save
Load the latest version of jQuery from a CDN and provide a fallback to a local source, like:
Load the Zebra TransForm plugin
Alternatively, you can load Zebra TransForm from JSDelivr CDN like this:
<!-- for the most recent version, not recommended in production --><!-- for a specific version --><!-- replacing "min" with "src" will serve you the non-compressed version -->
Load the style sheet file from a local source
...or from JSDelivr CDN
<!-- for the most recent version --><!-- replacing "min" with "src" will serve you the non-compressed version -->
Now, within the DOM-ready event do
If set to
Call this method if you want to revert elements to their original state .
var zt = ;zt;
Support the development of this project
Cross browser/device testing is done with