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

0 comments:

Post a Comment

Don't Forget to comment

About Me

My photo

HI i am mohammed  a Embedded Software Developer ,SEO specialist,Electronic engineer   Read more

ads