css - 带有选中和后标记的CSS表单复选框样式

Question

我正在尝试在不使用 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:"";
}

它适用于 Chrome，但似乎不适用于 Firefox 或 IE。怎么了？

Answer 1

对我有用的跨浏览器解决方案是在复选框输入之后包含一个空标签（类“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;
}

Answer 2

显然，规范不支持使用::beforeand::after伪元素。你的问题在这里得到解答。希望有帮助！