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

Question

我正在尝试使用css更改复选框的默认"框图像",但它无法正常工作.这有什么办法吗？

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

在我做的类文件中

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

Answer 1

你可以使用纯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;
}

Answer 2

尝试:

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

jQuery的

$('.input_class_checkbox').each(function(){
    $(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});

小提琴:http: //jsfiddle.net/cn6kn/

Answer 3

我使用纯CSS创建了一个小提琴.投票最多的答案不会处理点击事件,也不会有效,因为复选框值不会更改.

这是我的例子:

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

基本上,我们需要以下html:

<div class="checkbox_wrapper">
    <input type="checkbox" />
    <label></label>
</div>

以下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;
}

只需检查图像的路线,宽度和高度应等于图像的宽度和高度.在小提琴手上我使用base64编码的图像.

我希望它有用.