jQuery Custom Form Elements Plugin - Handsome

Handsome is a lightweight jQuery plugin that makes your default html form elements handsome. It currently supports custom check box, radio button or select drop down list styling.

How to use it:

1. Include the latest jQuery javascript library and jQuery Handsome plugin on your web page

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/handsome.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/handsome.css"/>

2. Create the html

<!-- Custom Checkbox Styling -->
<input type="checkbox" class="checkbox" checked />

<!-- Custom Radio Button Styling -->
<input type="checkbox" class="checkbox" checked />
<input type="radio" name="radio" class="radio" value="1" checked/>
<input type="radio" name="radio" class="radio" value="2" />
<input type="radio" name="radio" class="radio" value="3" />

<!-- Custom Select Dropdown -->
<select class="select" name="select" tabindex="1">
<option value="1">Click me and see</option>
<option value="2">All the cool stuff</option>
<option value="3">That I can do</option>
<option value="4">I need a long phrase</option>
<option value="5">In order to illustrate</option>
<option value="6">How this element handles</option>
<option value="7">Different text lengths</option>
<option value="8">And long options lists</option>
<option value="9">Because we are grown ups.</option>
</select>

3. Call the plugin

$(document).ready(function(){
$('.checkbox').checkBox();
$('.radio').radio();
$('.select').dropDown({useNativeMobile: true});
});

---

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