Custom styled checkboxes

Bored of the good old checkbox design?
Time for styling checkbox elements, giving custom design to checkboxes.

custom-styled-checkboxes
First of all, here’s the demo link

What are we doing?

Basically i want to replace this with this

So here’s one way(hack) to do it. Hide the default checkbox, instead use background images for the associated label. Use different images for checked/unchecked state of the checbox. We are not removing the checkboxes completely, those are there, just hidden by css with display:none. So clicking on the associated label does cause checking/unchecking of the checkbox, so its still available in forms post data, no issues there.

The HTML

standard checkbox html with labels, nothing fancy here

<ul class="customChList lstn">
	<li><input type="checkbox" value="1" id="chk1"/><label for="chk1">One - lorem psum </label></li>
	<li><input type="checkbox" value="2" id="chk2"/><label for="chk2">Two - lorem psum </label></li>
	<li><input type="checkbox" value="3" id="chk3"/><label for="chk3">Three - lorem psum </label></li>
	<li><input type="checkbox" value="4" id="chk4"/><label for="chk4">Four - lorem psum </label></li>
	<li><input type="checkbox" value="5" id="chk5"/><label for="chk5">Five - lorem psum </label></li>
</ul>

I’ve wrapped those checkboxes in ul li just for the purpose of applying one single css rule to all of them. You can use any way you want.

The CSS

Here’s the trick:
We’ll hide the checkboxes, toggle the background image of associated label with css and js. I’ve used this image . 3 states – normal, hover, checked.

.customChList li input[type='checkbox']{
	display:none;
}
.customChList li label{
	font-size: 18px;
	padding-left:35px;
	background: url(images/custom-checkbox.png) no-repeat;
}

.customChList li label:hover{
	background-position: 0px -32px;
}

.customChList li label.checked{
	background-position: 0px -64px;
}

A little javascript

Now when user clicks with the intention to check/uncheck the checkbox, we show it visually by adding/removing a css class of ‘checked’. So a simple change event:

$(document).ready(function(){
	$(".customChList input[type='checkbox']").change(function(){
		if($(this).is(":checked")){
			$(this).next("label").removeClass('hover').addClass('checked');
		}
		else{
			$(this).next("label").removeClass('checked');
		}
	});
});

We can use css3 adjacent selector in place of the above javascript.

So instead of the above javascript, the following css will also work:

.customChList li input[type='checkbox']:checked ~ label{
	background-position: 0px -64px;
}

This essentially does the same thing. But, as usual, it won’t work in IE, so lets just go with javascript.

That’s it in here. Hope you find it useful


Published by

Chandan Chaudhary

Chandan is a WordPress guy. A programmer at heart. He loves building community sites with WordPress and BuddyPress.

11 thoughts on “Custom styled checkboxes”

  1. Fantastic Tutorial! Great learning stuff. Is it also possible to have all checkboxes initially checked on page load? If so, how to achieve this?! 🙂

    1. Hi James and Kirsty,
      to have some checkboxes already checked on page load all you need to do is add a css class ‘checked’ to its associated label.
      So your html will be something like

    2. Makes sense?

  2. Great tutorial!  I was looking at a bunch of different customization techniques and yours was clear and easy to follow. Thanks.

  3. the javascript also can be:

    $(“.customChList input[type=’checkbox’]”).change(function(){
    $(“.customChList label”).removeClass(‘hover’).removeClass(‘checked’);

    if($(this).is(“:checked”)){
    $(this).next(“label”).addClass(‘checked’);
    }
    });

  4. This is a very nice example. Works like a charm in FF.

    I just can’t figure out how to use a different background or image per check box.

    I think I need to change customChList to customChList1, customChList2, customChList3, etc, but it must not be as easy as that.

    Dafu

  5. What if I need these check boxes on horizontal lines?

    I have tinkered and tinkered and cannot get these very nice check boxes in a horizontal row. I can get more of them than your example, but they are on a vertical line.

    Please tell me, Mr. Chandan Chaudhary, how can I make these on a horizontal line?

    Dafu

Leave a Reply

Your email address will not be published. Required fields are marked *