CSS 带有选中和之后标签的css表单复选框样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16429489/
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
css form checkbox styling with checked and after tags
提问by user1316401
I am trying to design a form without using JavaScript or JQuery. It includes a series of checkboxes. The idea is to display a certain gif after the checkbox if it is unchecked. Otherwise, display nothing after it. This is the code I have:
我试图在不使用 JavaScript 或 JQuery 的情况下设计一个表单。它包括一系列复选框。这个想法是如果未选中复选框，则在复选框后显示某个 gif。否则，在其后不显示任何内容。这是我的代码：
input[type=checkbox]::after
{
content: url(images/unchecked_after.gif);
position:relative;
left:15px;
z-index:100;
}
input[type=checkbox]:checked::after
{
content:"";
}
It works in Chrome but doesn't seem to be working in Firefox or IE. What is wrong?
它适用于 Chrome，但似乎不适用于 Firefox 或 IE。怎么了？
采纳答案by user1316401
The cross-browser solution that worked for me was to include an empty label (with class "checkbox_label") after the checkbox input and then style IT rather than the checkbox.
对我有用的跨浏览器解决方案是在复选框输入之后包含一个空标签（类为“checkbox_label”），然后设置 IT 样式而不是复选框。
input[type=checkbox] + label:after
{
content: url(images/unchecked_after.gif);
position:relative;
left:0px;
top:1px;
z-index:100;
}
input[type=checkbox]:checked + label:after
{
content:"";
}
.checkbox_label
{
height:0px;
width:0px;
display:inline-block;
float:left;
position:relative;
left:20px;
z-index:100;
}
