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

显然，规范不支持使用::before和::after伪元素。您的问题已得到解答here。希望有所帮助！

css表单复选框样式与选中和后标签

2 个答案: