将复选框检查图像更改为自定义图像

我正在尝试使用 CSS 更改复选框的默认“框图像”，但它不起作用。有没有办法解决？

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

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

您可以使用纯 css，只需向复选框添加一个标签，如下所示：

.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;
}

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">