jQuery Plugin for Custom Form Elements - Custom Forms

Custom Forms is a fast and lightweight jQuery Plugin that helps you create accessible and beautiful custom form elements like select, input, radio and check box on your website.

Basic Usage:

1.  Include the latest jQuery Library and custom.forms.jquery.js in your html page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="custom.forms.jquery.js"></script> 

2. Call the plugin

<script type="text/javascript">
	$(function() {
		$('form').customForm();
	});
</script>

3. Markup Html Structure (For example)

<form method="get" action="">
<fieldset>
<legend>Custom form</legend>
<p class="select-wrapper">
<label for="select">Select your option</label>
<br>
<select name="data[select]" class="cform">
<option value=""></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
</select>
</p>
<p>
<input type="radio" name="data[radio]" value="option1" id="option1" class="cform">
<label for="option1" class="lblr">Radio option 1</label>
</p>
<p>
<input type="radio" name="data[radio]" value="option2" id="option2" class="cform">
<label for="option2" class="lblr">Radio option 2</label>
</p>
<p>
<input type="checkbox" name="data[check]" value="female" id="optiona" class="cform">
<label for="optiona" class="lblr">A</label>
</p>
<p>
<input type="checkbox" name="data[check]" value="male" id="optionb" class="cform">
<label for="optionb" class="lblr">B</label>
</p>
</fieldset>
<fieldset class="normal-form">
<legend>Normal form</legend>
<p>
<label for="select">Select your option</label>
<select name="data[selectn]">
<option value=""></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
</select>
</p>
<p>
<input type="radio" name="data[radion]" value="option1n" id="option1n">
<label for="option1n">Radio option 1</label>
</p>
<p>
<input type="radio" name="data[radion]" value="option2n" id="option2n">
<label for="option2n">Radio option 2</label>
</p>
<p>
<input type="checkbox" name="data[checkn]" value="female" id="optionan">
<label for="optionan">A</label>
</p>
<p>
<input type="checkbox" name="data[checkn]" value="male" id="optionbn">
<label for="optionbn">B</label>
</p>
</fieldset>
</form>

4. The CSS

.custom-form-select {
	background: url("../img/sprite.png") no-repeat scroll -12px -76px transparent;
	color: #000000;
	height: 38px;
	overflow: hidden;
	padding: 0 24px 0 8px;
	position: absolute;
	width: 172px;
	font: bold 12px/35px Helvetica, Arial, sans-serif;
}

.custom-form-focused {
	background-position: -12px -123px;
}

.custom-form-checkbox {
	float:left;
	display:block;
	width:21px;
	height:23px;
	margin-right:10px;
	background:url('../img/sprite.png') no-repeat scroll -51px -9px transparent;
}

.custom-form-checkbox.custom-form-focused {
	background-position:-10px -9px;
}

.custom-form-checkbox.custom-form-checked {
	background-position:-51px -39px;
}

.custom-form-checkbox.custom-form-checked.custom-form-focused {
	background-position:-10px -39px;
}

.custom-form-radio {
	float:left;
	display:block;
	width:21px;
	height:23px;
	margin-right:10px;
	background:url('../img/sprite.png') no-repeat scroll -133px -9px transparent;
}

.custom-form-radio.custom-form-focused {
	background-position:-92px -9px;
}

.custom-form-radio.custom-form-checked {
	background-position:-133px -39px;
}

.custom-form-radio.custom-form-checked.custom-form-focused {
	background-position:-92px -39px;
}

---

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