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 a jQuery 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.
//Code Starts
<link href="/css/jqtransform.css" rel="stylesheet"/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.jqtransform.min.js"></script>
//Code Ends
Now to apply transform effect, assign a CSS class "jqtransform" form so that all the controls within the form gets transformed.
//Code Starts
<form class="jqtransform">
<input type="checkbox" name="checkbox" />
<input type="radio" name="radio-btn" value="1" checked="checked"/>
<input type="radio" name="radio-btn" value="2" />
<select>
<option>Option 1</option>
<option>Option 2</option>
<select>
</form>
//Code Ends
Now, all you need to call is jQTransform() function using CSS selector.
//Code Starts
$(document).ready(function() {
  $('.jqtransform').jqTransform();
});
//Code Ends
Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..