jQuery Plugin For Beautifying Form Elements - Fancy Fields

Fancy Fields is a jQuery and jQuery UI based plugin that allows you to beautify/custom your html form elements like input, text field, select list, checkbox, radio button, etc. It comes with 9 built-in themes for creating your own form style to fit your needs in web design.

Related plugins:

• jQuery Plugin for Custom Form Elements - Custom Forms
• Beautify Your Form with Amazing Effects - Living Form

How to use it:

1. Include jQuery library and jQuery UI on the page

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>

2. Include Fancy fields js & css files after jQuery

<script src="fancyfields-1.2.min.js" type="text/javascript"></script>
<link href="fancyfields.css" rel="stylesheet" type="text/css" />

3. Include Fancy fields add-on for custom scroll bar

<script src="fancyfields.csb.min.js" type="text/javascript"></script>

4. Markup

<div class="demo">
<h4>Checkbox:</h4>
<input type="checkbox" tabindex="5" id="cb1" />
<label>checkbox 1</label>
<br/>
<input type="checkbox" tabindex="4" id="cb2" checked="checked" />
<label>checkbox 2</label>
<br/>
<input type="checkbox" tabindex="3" id="cb3" disabled="disabled" />
<label>checkbox 3</label>
<br />
<h4>Radio:</h4>
<input type="radio" value="aaa" name="group1" id="rad1" />
<label>radio 1</label>
<input type="radio" value="bbb" name="group1" id="rad2" checked="checked"  />
<label>radio 2</label>
<input type="radio" value="ccc" name="group1" id="rad3" />
<label>radio 3</label>
</div>

5. Call the plugin

<script type="text/javascript">
$(document).ready(function () {
    $(".demo").fancyfields();
});
</script>

Change Logs:

v1.2.5 (2014-11-16)

• Fix - select box click on selected option

v1.2.4 (2013-07-01)

• Fix toggleEnable function

v1.2.2 (2013-05-29)

• add select change validation

v1.2.2 (2013-05-08)

• fix button "Hasclass" bug

---

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