自定义复选框在Firefox上失败

Question

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

编辑:它似乎在Firefox 37上正常工作.

以下答案仍然相关,但2013年中期的风格相关问题已得到解决.

这里没有提到IE支持,但欢迎对其进行编辑/回答.

演示

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

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

-moz-appearance:initial

Answer 2

我设法尽可能地修复它(我仍然喜欢更好的解决方案,如果存在的话).我切换了所有的选择器

input[type=checkbox]::after

至

input[type=checkbox] + label::after

下行:

• 需要一个标签

但:

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

结论:

• 只对无效的HTML有害