带有checked和after标记的css表单复选框样式

我正在尝试设计一个不使用JavaScript或JQuery的表单。它包括一系列复选框。如果复选框未选中，则在复选框后显示特定的gif。否则，在它之后不显示任何内容。这是我的代码：

输入[type=checkbox]：：之后
{
内容：url（image/unchecked_after.gif）；
位置：相对位置；
左：15px；
z指数：100；
}
输入[类型=复选框]：选中：：之后
{
内容：“；
}

---

它在Chrome中工作，但在Firefox或IE中似乎不起作用。怎么了？

显然，规范不支持使用

：before

和

：：after

伪元素。你的问题已经回答了。希望有帮助

对我有效的跨浏览器解决方案是在复选框输入之后包含一个空标签（带有类“checkbox\u label”），然后将其设置为样式，而不是复选框

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;
}

---

我在Firefox 20和IE10中进行测试，这就是为什么我认为我做错了什么…但是什么？我正在用Firefox在JSFIDLE上进行测试，可以重现您的错误。让我看看是否能找到解决办法。我想我找到问题了。我已将其编辑到我的答案中。不幸的是，将“输入”包装在“span”标记中也不起作用。该死的，我只是想继续尝试不同的东西…嗯。。。将输入包装在span标记中对我很有用。确实要将

：：样式化后应用于span标记而不是输入标记吗？
input
是一个内容模型为空的元素–并且由于
：：在将
伪元素呈现为其应用于的元素的子节点后，存在冲突。有些浏览器允许这样做，有些则不允许。使用相邻的同级组合符来格式化您放在输入元素之后的元素。谢谢，这就解释了。但我仍然无法让它工作。例如，如果我在复选框后面加了一个“p”标记，那么下面的CSS选择器就不起作用了：input[type=checkbox]：checked+p:afterhey谢谢你的回答，你能提供一些参考或者+运算符叫什么吗。。。？在这个。。上下文选择紧跟在元素1之后的元素2。