html - html更改复选框选中图像到自定义图像

  显示原文与译文双语对照的内容

我正在尝试用css更改复选框的默认'方框图像',但它不工作。 有什么方法可以让 arround?


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



在我的班级档案里


.class_checkbox{


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


}



时间: 原作者:

尝试以下方法:


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

原作者:

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


}



我使用纯CSS创建了一个 Fiddle 。 最大的回答不能处理单击事件,并且不能正常工作,因为复选框值不会更改。

这是我的例子:

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编码的图像上。

我希望它能有用。

原作者:
...