A short and sweet piece of code, but very powerful in giving you total control over the design of your checkboxes.

Click here to view the demo.

The problem I set out to solve here was a combination of two things. The first was the ability to change the look of checkboxes in web forms. By default they cannot be altered using CSS as the style is determined by the user’s operating system. The second problem was that the existing JavaScript solutions to this problem were bloated with a lot of unnecessary code.

My solution solves a simple problem using very little code, so I hope it comes in useful! Let me walk you through the steps…

Step 1, add a block container around your checkbox.

<div class="container">
    <input type="checkbox" value="1" class="checkbox" />
</div>

That’s all the HTML you're going to need!

Step 2, style your checked and unchecked states as an image. (It’s a good idea to optimise these as a sprite instead of two separate images to save on HTTP requests and avoid a flicker when the images switch.)

Step 3, add your CSS.

The checkbox image should be added to the checkbox container rather than to the checkbox itself.

.container {
    width:20px;
    height:20px;
    background:url(checkbox.gif) no-repeat;
    cursor:pointer;
    overflow:hidden;
    position:relative; /* IE fix to hide overflow */
}

Add your ‘checked’ class, which should just be a change in the background position if you’ve used a sprite.

.checked {
    background-position:0px -20px !important;
}

Next, we want to position our checkbox so it appears outside of the container.

.checkbox {
    position:relative;
    left:30px;
}

If you have a look at your page now, you should see your custom checkbox and your default checkbox sitting pretty beside each other. Next, we’ll move on to the jQuery.

Step 4, add your jQuery.

The theory behind the idea is for the user to click on the block container and use jQuery to automatically check the checkbox that sits inside it. Then we use CSS to hide the default checkbox.

var $this = $(".container");
$(".container").toggle(function(){
    $this.addClass("checked");
    $(".checkbox").attr("checked","checked");
},function(){
    $this.removeClass("checked");
    $(".checkbox").removeAttr("checked");
});

The toggle function here will allow you to add your checked class as well as check the checkbox itself, and then remove the style and checked attribute on every 2nd click.

If you run this in your browser now and click on the custom checkbox, you should see that the default checkbox is being toggled automagically! If you are seeing this, then all that is left to do is hide your default checkbox using CSS. So in your container class, simply add the following:

overflow:hidden;
position:relative; /* IE fix to hide overflow */

So the whole container class should look like this:

.container {
    width:20px;
    height:20px;
    background:url(checkbox.gif) no-repeat;
    cursor:pointer;
    overflow:hidden;
    position:relative; /* IE fix to hide overflow */
}

I’ve tested this code in Firefox 3, IE6, IE7, IE8, Safari, Chrome and Opera all on Windows and it works fine in all browsers. Have a look at the demo and let me know what you think!