Input elements Checkbox and
radio of forms are most difficult to style to match your overall design.
I realized it when client ask
me to style all the checkbox and radio button same ie. All the checkboxes and
radio buttons look same. These form
elements display depends on the operating system.
But thanks to jQuery we can
style these in our own way.
Context
This plugin is a jQuery checkbox and radio button styling plugin which allows you to skin these elements.Here is a default style. Depending on your OS.
After:
Then
here is our styled elements with your own options whatever the browser you use.
Usage
1- Add javascript inclusion in the header section of your web page
//required
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jumbostyle.js"></script>
2- Write your form
<div
class="jumbo">
<form
id="testForm" action="usage.php"
method="post">
<fieldset>
<legend>Sex:</legend>
<input type="radio"
name="sex" value="male" id="male" /> <label
for="male">Male</label> <br />
<input type="radio"
name="sex" value="female" id="female" />
<label for="female">Female</label> <br />
</fieldset>
<br>
<fieldset>
<legend>Subscription:</legend>
<input type="checkbox"
name="subscribe[]" value="male" id="news" /> <label for=" news ">Subscribe
to our newsletter</label> <br />
<input type="checkbox"
name="subscribe[]" value="female" id="promotion"
/> <label for=" promotion ">Receive promotional
email</label> <br />
</fieldset>
</form>
</div>
3- Finally use the plugin
After it, call the jumbo plugin:
Syntax:
$(‘wrapper elements id or class name or tag name’).jumbo(options);
Example in here we only want to style the elements inside
the div with class name “jumbo”:
<script type="text/javascript">
$(function()
{
$('.jumbo').jumbo({color:'white'});
});
</script>
Note: If you want to apply it
on all the elements in page then use:
$('body).jumbo({color:'blue'});
4- Options:
Plugin available in 5 color range:
1)
$('body).jumbo({color:'red'});
2)
$('body).jumbo({color:'blue'});
3)
$('body).jumbo({color:'black'});
4)
$('body).jumbo({color:'yellow'});
5)
$('body).jumbo({color:'white'});
