Checkbox is one of the most frequently used element on the forms, plain checkbox will be nice if in the forms we made there are many checkbox or others forms element that are used, but how about we just need a single checkbox in our forms without any other forms element, a little bit horrible, i think.

Another case, we need a ‘visual toggle’ that represent two input value, YES or NO, ON or OFF, TRUE or FALSE. It means we must stylize our default and plain checkbox, now do you still remember iPhone style checkboxes? That’s it, i will explain how to create that one.


The Basic and The Technique
Basically, to create stylized checkbox we just need to replace default checkbox with the DIV element that have a background image. To decide which images we want to show (ON or OFF, for example) we will read the checkbox’s value.

In this implementation, we will use image sprite that represent two checkbox status (checked and unchecked). First, we set the CSS class to display the images and to make it looks like a toggle we adjust the background position. In this case, for ON-style we set the background position with ‘top left’ or ‘0% 100%’ in percentage, OFF-style we set ‘top right’ or ‘100% 0%’.

So if the checkbox has an ON class it will display the image in ON-style, take a look at the following code :

.on {
	background-position: 0% 100%;
}
 
.iphone-style  {
	display: block;
	width: 87px;
	height: 28px;
	background: url('images/check-square.png') no-repeat;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;
}

<div class="iphone-style on"></div>

And if the checkbox has an OFF class it will display the image in unchecked or OFF-style.

.off {
	background-position: 100% 0%;
}
.firerift-style {
	display: block;
	width: 68px;
	height: 28px;
	background: url('images/check-circle.png') no-repeat;
	cursor: pointer;
}

<div class="firerift-style on"></div>

The Rest, Let’s jQuery Rock!
At this point we have a static stylized checkbox. We can make it being checked or unchecked by adding or removing the class, but we don’t let the user do our task, don’t we? Then it’s time for adding some jQuery magic.

Firstly, we replace all our checkbox with our image using the CSS class we have made before by hiding the default checkbox and create a DIV element that have a background image that represent ‘visual toggle’, plus add a rel attribute and fill it with selected checkbox’s ID. As i said, by reading the checkbox’s value we can decide which image we want to show (ON or OFF) . That’s it, all our default checkboxes have been replaced with the ‘visual toggle’ based on its value.

$('.iphone-style-checkbox, .firerift-style-checkbox').each(function() {
 
	thisID		= $(this).attr('id');
	thisClass	= $(this).attr('class');
 
	switch(thisClass) {
		case "iphone-style-checkbox":
			setClass = "iphone-style";
		break;
		case "firerift-style-checkbox":
			setClass = "firerift-style";
		break;
	}
 
	$(this).addClass('hidden');
 
	if($(this)[0].checked == true)
		$(this).after('
<div class="'+ setClass +' on"></div>
');
	else
		$(this).after('
<div class="'+ setClass +' off"></div>
');
});

The last thing we must add is a click event to the DIV that triggered to the checkbox value. If the checkbox is unchecked it means we must make it checked, then we must remove class OFF and add class ON, vice versa. To check which checkboxes are clicked we simply read DIV’s rel attribute value that represent the checkbox’s ID.

$('.firerift-style').live('click', function() {
 
	checkboxID		= '#' + $(this).attr('rel');
 
	if($(checkboxID)[0].checked == false) {
 
		$(checkboxID)[0].checked = true;
		$(this).removeClass('off').addClass('on');
 
	} else {
 
		$(checkboxID)[0].checked = false;
		$(this).removeClass('on').addClass('off');
 
	}
});

Still too plain? Then we can add an animation for toggle transition.

$('.iphone-style').live('click', function() {
 
	checkboxID		= '#' + $(this).attr('rel');
 
	if($(checkboxID)[0].checked == false) {
 
		$(this).animate({backgroundPosition: '0% 100%'});
 
		$(checkboxID)[0].checked = true;
		$(this).removeClass('off').addClass('on');
 
	} else {
 
		$(this).animate({backgroundPosition: '100% 0%'});
 
		$(checkboxID)[0].checked = false;
		$(this).removeClass('on').addClass('off');
 
	}
});

And that’s it, we have our own cute checkbox. For further usage we just need to create another stylish image and add some animation. Thanks for reading! You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed or webstuffshare FREE Email subscription. If you like this post, your sharing and feedback would be very appreciated

Tags :   CSS    Forms    jQuery  

Share :           Stylize Your Own Checkboxes (via @hdytsgt)

  Similar Stuffs  

• [Code Snippet] jQuery : Checkbox & Table
• 10 Random jQuery Snippet
• Free PSD : Checkbox Replacement
• Take Control of Your Table View
• Howto Create Mac-like Login Form