自定义复选框在Firefox上失败

Question

我正在尝试使用CSS3制作自定义复选框，这在Chrome上运行良好。在Firefox上......不是那么多。

  

编辑：它似乎在Firefox 37上正常运行。

     

以下答案仍然具有相关性，但2013年中期的风格相关问题已得到解决。

     

此处未提及IE支持，但欢迎对其进行编辑/回答。

demo

HTML：

<input type="checkbox" id="first"/>
<label for="first">This is pretty awesome</label>

CSS：

input[type=checkbox] {
  appearance: none;
  background: transparent;
  position: relative;
}
input[type=checkbox]::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  text-align: center;
  background: #aaa;
  display: block;
  pointer-events: none;
  opacity: 1;
  color: black;
  border: 3px solid black;
}
input[type=checkbox] + label {
  line-height: 48px;
  margin: 0 15px 0 15px;
}
input[type=checkbox]:hover::after {
  content: '';
  background: #32cd32;
  opacity: .3;
}
input[type=checkbox]:checked::after {
  content: '\2713';
  background: #32cd32;
}
input[type=checkbox]:checked:hover::after {
  opacity: 1;
}
input[type=checkbox],
input[type=checkbox]::after {
  width: 48px;
  height: 48px;
  font-size: 46px;
  line-height: 48px;
  vertical-align: middle;
  border-radius: 50%;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

_{注意：为了简洁起见，我删除了供应商前缀，以及用户选择等内容。完整的代码在笔中。}

我需要更改哪些内容在Firefox上看起来与在Chrome上看起来相同？

所需：

不希望：

Answer 1

我设法尽可能地修复它（我仍然喜欢更好的解决方案，如果存在的话）。我从

切换了所有选择器

input[type=checkbox]::after

到

input[type=checkbox] + label::after

缺点：

• 需要标签

可是：

• HTML要求输入元素具有标签

结论：

• 仅对无效HTML
有害

Answer 2

技术上并不需要LABEL，但确实需要控制标记，以确保在复选框之后立即存在可定位的兄弟。

即

input[type=checkbox] + span::after{
  display:block;
  width:50px;
  height:50px;
  background:yellow;
  display:block;

}

input[type=checkbox]:checked + span::after{
  display:block;
  width:50px;
  height:50px;
  background:yellow;
  display:block;

}

    <input type="checkbox"></input>
    <span class="targetMe"></span>

使用兄弟选择器和以下元素定位跨度。

此时可能还要贴上标签......：P

Answer 3

您可以通过添加此属性来启用专门用于mozilla浏览器的复选框的自定义样式，并且该属性对我有用。

-moz-appearance:initial

Answer 4

问题在于:after和::after在技术上创建了一个元素，作为应用伪选择器的元素的最后一个子。 Firefox不喜欢在其复选框内创建子项。这实际上是replaced elements更重要主题的一部分。

您会看到:before和::before伪元素在复选框上不起作用的相同问题，因为它们会在所选元素中创建元素作为第一个子元素。