Html 将复选框复选框图像更改为自定义图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10270987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change checkbox check image to custom image
提问by themhz
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?
我正在尝试使用 CSS 更改复选框的默认“框图像”，但它不起作用。有没有办法解决？
.class_checkbox{
background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;
}
<input type="checkbox" class="class_checkbox">
采纳答案by iambriansreed
Try:
尝试：
<input type="checkbox" class="input_class_checkbox">
jQuery
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'))
});
Fiddle: http://jsfiddle.net/cn6kn/
小提琴：http: //jsfiddle.net/cn6kn/
$('.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'))
});.class_checkbox {
width: 20px;
height: 20px;
background-color: red;
}
.class_checkbox.checked {
background-color: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="input_class_checkbox">回答by ali mokrani
You can use pure css, just add a label to the checkbox like this:
您可以使用纯 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;
}
Example HTML:
示例 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">回答by Tony
I created a Fiddle using pure CSS. The most voted answer doesn't handle click events and won't work well, because the checkbox value won't change.
我使用纯 CSS 创建了一个 Fiddle。投票最多的答案不处理点击事件，也不会很好地工作，因为复选框值不会改变。
This is my example:
这是我的例子：
Basically, we need the following html:
基本上，我们需要以下 html：
<div class="checkbox_wrapper">
<input type="checkbox" />
<label></label>
</div>
And the following CSS:
以及以下 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;
}
Just check the routes of the images, and the widths and heights should be equal to the width and height of the images. On the fiddler I am using base64 encoded images.
只需检查图像的路线，宽度和高度应等于图像的宽度和高度。在提琴手上，我使用的是 base64 编码的图像。
I hope it can be useful.
我希望它有用。
回答by Enbyted
I found another way, without using adjacent labels or surrounding divs.
我找到了另一种方法，不使用相邻的标签或周围的 div。
My usecase was that I had a markdown parser that generates those nifty TODO lists and I wanted to style them. Changing the generated HTML wasn't a option, so I came up with this solution:
我的用例是我有一个 Markdown 解析器，可以生成那些漂亮的 TODO 列表，我想为它们设置样式。更改生成的 HTML 不是一个选项，所以我想出了这个解决方案：
given a checkbox like this:
给定一个这样的复选框：
<input type="checkbox" id="cb">
You can style it with visibility: hiddenon checkbox and visibility: visibleon ::after, like this:
您可以使用visibility: hidden复选框和visibility: visible::after 设置样式，如下所示：
#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>EDIT:
编辑：
@connexo in a comment pointed out that input elements cannot have content. It could be easly done using label element, for example like so (please someone correct me if this is wrong, I don't have non-webkit browser handy to test it).
@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>The checkbox works just like normal one and you can style it anyway you like.
该复选框的工作方式与普通复选框一样，您可以随意设置样式。
Maybe it'll help someody (and I can bookmark it, because I haven't found anything like this on the web)
也许它会对某人有所帮助（我可以将其添加为书签，因为我在网上找不到这样的东西）
回答by Sergei Ryzhov
Maybe will be useful my sample with LESS.
也许对我的 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;
}
}
