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