CSS样式复选框造型与核对后标签[复制](css form checkbox styling wit

2019-09-02 05:11发布

这个问题已经在这里有一个答案：

我可以使用：before或：在输入栏上after伪元素？ 20个回答

我想设计一个表格，而不使用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”）的复选框，输入后再风采吧，而不是复选框。

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