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">

<select>
<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>
</select>

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

$(function(){

   $.Zebra_TransForm();

});

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

$(function(){

   $.Zebra_TransForm({
     style_disabled_labels:  true
   });

});

6. API methods.

var instance = $.Zebra_TransForm();

// remove all styles
instance.remove();

// update the plugin
instance.update();

Changelog:

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.