Tiny jQuery Plugin For Styling Form Elements - Zebra_TransForm

File Size: 26.8 KB
Views Total: 2582
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Tiny jQuery Plugin For Styling Form Elements - Zebra_TransForm

jQuery Zebra_TransForm is a tiny and cross-browser jQuery plugin that makes it easy to beautify your existing form elements like select boxes, checkboxes and radio buttons.

How to use it:

1. Include required jQuery Zebra_TransForm CSS on the page

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

2. Create the html

<input type="checkbox" name="checkbox[]" value="1" id="checkbox_1">

<input type="radio" name="radio" value="1" id="radio_1">

<option value="">- Select -</option>
<option value="1">Select option 1</option>
<option value="2">Select option 2</option>
<option value="3">Select option 3</option>

3. Include jQuery library and jQuery Zebra_TransForm on the web page

<script src="jquery.min.js"></script>
<script src="zebra_transform.js"></script> 

4. Initialize the plugin and done




5. Decide whether to style the labels of disabled checkboxes and radio buttons.


     style_disabled_labels:  true


6. API methods.

var instance = $.Zebra_TransForm();

// remove all styles

// update the plugin


v3.0.2 (2024-05-15)

    •   Updated with latest changes

v3.0.1 (2021-02-13)

  • added the update method for updating styling after a checkbox or radio button's status is manually updated
  • update dependency

v3.0.0 (2018-08-09)

  • performance improvements and source code tweaks

v2.4.4 (2016-01-20)

  • JS update

v2.4.3 (2016-01-17)

  • JS update

v2.4.1 (2016-01-16)

  • Fixed a bug where resizing the window would render all transformed elements unusable

v2.4.0 (2013-07-25)

  • bugs fixed


This awesome jQuery plugin is developed by stefangabos. For more Advanced Usages, please check the demo page or visit the official website.