纯 CSS 复选框图像替换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3772273/
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
Pure CSS checkbox image replacement
提问by Alex C
I've got a checkbox list in a table. (one of a number of CB's on the row)
我在表格中有一个复选框列表。（该行的多个 CB 之一）
<tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'> </label></td></tr>
<tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'> </label></td></tr>
<tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'> </label></td></tr>
<tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'> </label></td></tr>
I'd like to replace the checkbox image with a pair of custom on/off images and I was wondering if anyone had some better understanding of how to do this with CSS?
我想用一对自定义开/关图像替换复选框图像，我想知道是否有人对如何使用 CSS 有更好的理解？
I've found this "CSS ninja" tutorial, but I'll have to admit to finding it a bit complex for me. http://www.thecssninja.com/css/custom-inputs-using-css
我找到了这个“CSS ninja”教程，但我不得不承认它对我来说有点复杂。 http://www.thecssninja.com/css/custom-inputs-using-css
As far as I can tell, you're allowed to use a pseudo class
据我所知，您可以使用伪类
td:not(#foo) > input[type=checkbox] + label
{
background: url('/images/off.png') 0 0px no-repeat;
height: 16px;
padding: 0 0 0 0px;
}
My expectation was that by adding the above CSS the checkbox would at least default to displaying the image in the OFF state and then I'd add the following to get the ON
我的期望是，通过添加上面的 CSS，复选框至少会默认在关闭状态下显示图像，然后我会添加以下内容以打开
td:not(#foo) > input[type=checkbox]:checked + label {
background: url('/images/on.png') 0 0px no-repeat;
}
Unfortunately, it seems I'm missing a critical step somewhere. I've tried to use the custom CSS3 selector syntax to match my current setup - but must be missing something (The images are size 16x16 if that matters)
不幸的是，我似乎在某处错过了关键步骤。我尝试使用自定义 CSS3 选择器语法来匹配我当前的设置 - 但必须缺少一些东西（如果重要的话，图像大小为 16x16）
http://www.w3.org/TR/css3-selectors/#checked
http://www.w3.org/TR/css3-selectors/#checked
EDIT: I'd been missing something in the tutorial where he applies the image change to the label and not the input itself. I'm still not getting the expected swapped image for checkbox result on page, but think I'm closer.
编辑：我在教程中遗漏了一些东西，他将图像更改应用于标签而不是输入本身。我仍然没有得到页面上复选框结果的预期交换图像，但我想我更接近了。
回答by arbales
You are close already. Just make sure to hide the checkbox and associate it with a label you style via input[checkbox] + label
你已经很接近了。只需确保隐藏复选框并将其与您通过的标签相关联input[checkbox] + label
Complete Code: http://gist.github.com/592332
完整代码：http: //gist.github.com/592332
JSFiddle: http://jsfiddle.net/4huzr/
JSFiddle：http: //jsfiddle.net/4huzr/
回答by Mo Valipour
Using javascript seems to be unnecessary if you choose CSS3.
如果您选择 CSS3，使用 javascript 似乎是不必要的。
By using :beforeselector, you can do this in two lines of CSS. (no script involved).
通过使用:before选择器，您可以在两行 CSS 中完成此操作。（不涉及脚本）。
Another advantage of this approach is that it does not rely on <label>tag and works even it is missing.
这种方法的另一个优点是它不依赖于<label>标签，即使它丢失也能工作。
Note: in browsers without CSS3 support, checkboxes will look normal. (backward compatible).
注意：在不支持 CSS3 的浏览器中，复选框看起来很正常。（向下兼容）。
input[type=checkbox]:before { content:""; display:inline-block; width:12px; height:12px; background:red; }
input[type=checkbox]:checked:before { background:green; }?
You can see a demo here: http://jsfiddle.net/hqZt6/1/
你可以在这里看到一个演示：http: //jsfiddle.net/hqZt6/1/
and this one with images:
还有这个带图片的：
回答by Vylson silwr
If you are still looking for further more customization,
如果您还在寻找更多的定制，
Check out the following library: https://lokesh-coder.github.io/pretty-checkbox/
查看以下库：https: //lokesh-coder.github.io/pretty-checkbox/
Thanks
谢谢
