我正在尝试使用CSS更改复选框的默认“框图像”，但它无法正常工作。有没有办法解决？
.class_checkbox{
background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;
}
<input type="checkbox" class="class_checkbox">
尝试：
<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'))
});
你可以使用纯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创建了一个小提琴。投票最多的答案不会处理点击事件，也不会很好用，因为复选框值不会改变。
这是我的例子：
基本上，我们需要以下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编码的图像。
我希望它有用。
我找到了另一种方法，没有使用相邻的标签或周围的div。
我的用例是我有一个markdown解析器生成那些漂亮的TODO列表，我想要设置它们的样式。更改生成的HTML不是一个选项，所以我提出了这个解决方案：
给出一个像这样的复选框：
<input type="checkbox" id="cb">
您可以使用复选框上的visibility: hidden和:: after之后的visibility: visible来设置样式，如下所示：
#cb {
visibility: hidden;
}
input#cb::after {
visibility: visible;
content: "F";
color: red;
background: green;
padding: 8px;
}
input#cb:checked::after {
content: " T ";
color: green;
background: red;
}<!doctype html>
<html>
<body>
<input type="checkbox" id="cb">
</body>
</html>编辑：
@connexo在评论中指出输入元素不能有内容。它可以很容易地使用标签元素完成，例如像这样（请有人纠正我，如果这是错误的，我没有非webkit浏览器方便测试它）。
#cb-span * {
visibility: hidden;
}
input#cb + label::after {
visibility: visible;
content: "F";
color: red;
background: green;
padding: 8px;
}
input#cb:checked + label::after {
content: " T ";
color: green;
background: red;
}<!doctype html>
<html>
<body>
<span id="cb-span">
<input type="checkbox" id="cb">
<label for="cb"></label>
</span>
</body>
</html>该复选框的工作方式与普通复选框相同，您可以随意设置它的样式。
也许它会帮助某人（我可以将它加入书签，因为我在网上找不到这样的东西）
也许对我的LESS样本很有用。
<div class="custom-checkbox">
<input component="input" type="checkbox"/>
<label>Here is caption right to checkbox</label>
</div>
@imgsize: 25px;
.custom-checkbox{
position: relative;
> input[type="checkbox"] {
display:none;
position: absolute;
top: 0;
left: 0;
+ label{
background:url('../img/unchecked.png') no-repeat 0 0;
background-size:@imgsize;
height: @imgsize;
padding: 4px 0 5px 35px;
display: inline-block;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
}
> input[type="checkbox"]:checked + label{
background:url('../img/checked.png') no-repeat;
background-size:@imgsize @imgsize;
}
}