Tiny jQuery Plugin For Styling Form Elements - Zebra_TransForm

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 type="text/javascript" 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


v3.0.0 (2018-08-09)

  • performance improvements and source code tweaks

v2.4.4 (2016-01-20)

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.

  • Publication date: 09.08.2018
  • Source