Make your input controls look stylish using jQuery

STYLE matters whether it comes to clothes, house or web pages because it attract others. So in this post, I will show you how to make your input control looks stylish using jQuery. There is ajQuery plugin called "jqTransform" which makes input control look stylish. 

This plugin allows you to create custom form elements. This plugin can customize all types of form inputs, textarea, buttons and it works with all major browsers.

Download the plugin and add reference of jQuery library and plugin. Also don't forget to include the required CSS that comes with the plugin.

1	//Code Starts

2	<link href="/css/jqtransform.css" rel="stylesheet"/>

3	<script type="text/javascript" src="/js/jquery.js"></script>

4	<script type="text/javascript" src="/js/jquery.jqtransform.min.js"></script>

5	//Code Ends

Now to apply transform effect, assign a CSS class "jqtransform" form so that all the controls within the form gets transformed.

01	//Code Starts

02	<form class="jqtransform">

03	<input type="checkbox" name="checkbox" />

04	<input type="radio" name="radio-btn" value="1" checked="checked"/>

05	<input type="radio" name="radio-btn" value="2" />

06

<select>

07	<option>Option 1</option>

08	<option>Option 2</option>

09

<select>

10

</form>

11	//Code Ends

Now, all you need to call is jQTransform() function using CSS selector.

1	//Code Starts

2	$(document).ready(function() {

3	$('.jqtransform').jqTransform();

4

});

5	//Code Ends

Download Plugin
Official Website