html - 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?

.class_checkbox{
    background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;
}

<input type="checkbox" class="class_checkbox">

Answer 1

You can use pure css, just add a label to the checkbox like this:

.check_box {
    display:none;
}

.check_box + label{
    background:url('images/check-box.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

.check_box:checked + label{
    background:url('images/check-box-checked.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Example HTML:

    .check_box {
    display:none;
    }

    .check_box + label{
    background:url('images/check-box.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
        padding: 0 0 0 0px;
    }

    .check_box:checked + label{
        background:url('images/check-box-checked.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
        padding: 0 0 0 0px;
    }

<input type="checkbox" class="check_box" id="checkbox1">
<label for="checkbox1">