Fancy Radio-button and Checkbox

Fancy Radio/ Checkbox

I have written a jQuery Plugin for Fancy Custom Checkbox and Radio-buttons. To make form elements visually more expressive. I required this for one of my project and later on I have rewritten it completely to make it more generic and easier for jQuery Lovers. I am great fan of jQuery and I am inspired by http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ to write this plugin.

It's fairly easy to use just like any other jQuery plugin you just have to write couple of lines of javascript code and add some CSS to your html.

Javascript You need:

$(document).ready(function(){
	$(".radio").dgStyle();
	$(".checkbox").dgStyle();
});


CSS You need:

.radio {
	height: 25px;
	width: 19px;
	clear:left;
	float:left;
	margin: 0 0 3px;
	padding: 0 0 0 26px;
	background: url("radio.png");
	background-repeat:no-repeat;
	cursor: default;
}
.checkbox {
	height: 25px;
	width: 19px;
	clear:left;
	float:left;
	margin: 0 0 3px;
	padding: 0 0 0 26px;
	background: url("checkbox.gif") no-repeat;
	cursor: default;
	text-align:left;
}
.checkbox input,.radio input {
	display: none;
}
.checkbox input.show,.radio input.show {
	display: inline;
}
.selected {
	background-position: 0 -52px;
}
.block {
	width: 50%;
	float: left;
}
label {
	padding-left:10px;
	float:left;
	text-align:left;
}
 

Here, CSS class which we need to give is not fixed and it can be changed in CSS code and Javascript as well. So in above example it is "radio" and "checkbox", which could be anything you want. The only thing which needs to be taken care of is it has to be consistent in all CSS, Javascript and HTML we generate.

See live demo in action or just download a zip file consisting sample image, js and html code to play with.

Please comment your experience or any enhancement/feature you add to it or wish to have or any bug encountered while using it.

Love to hear back from You..! :)