Change checkbox check image to custom image

Question

I am trying to change the default \'box image\' of the checkbox with CSS, but it is not working. Is there any way around this?

Answer 1

I created a Fiddle using pure CSS. The most voted answer doesn't handle click events and won't work well, because the checkbox value won't change.

This is my example:

http://jsfiddle.net/kEHGN/1/

Basically, we need the following html:

And the following CSS:

.checkbox_wrapper{
    position: relative;
    height: 16px;
    width: 17px;
}

input[type="checkbox"] {
    opacity:0;
    height: 16px;
    width: 17px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

input[type="checkbox"] + label{
    background:url('../images/unchecked.png') no-repeat;
    height: 16px;
    width: 17px;
    display:inline-block;
    padding: 0 0 0 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

input[type="checkbox"]:checked + label{
    background:url('../images/checked.png') no-repeat;
    height: 16px;
    width: 17px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Just check the routes of the images, and the widths and heights should be equal to the width and height of the images. On the fiddler I am using base64 encoded images.

I hope it can be useful.