自定义复选框在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;
}

_{注意：出于简洁起见，我删除了供应商前缀和诸如user-select之类的内容。完整代码在pen中。}

我需要改变什么才能使它在Firefox上看起来与Chrome相同？

期望效果：

不期望效果：

- Brigand

---

使用纯CSS是不可能的。URL：https://dev59.com/questions/bXE85IYBdhLWcg3w1HOF - Vipul Vaghasiya

其他Mozilla链接：http://forums.mozillazine.org/viewtopic.php?f=25&t=291007 - Vipul Vaghasiya

抱歉，我修复了图片。因此，后续文本在Firefox上确实显示出来，但未显示边框半径或框阴影。我甚至愿意以某种方式隐藏复选框。我正在尝试隐藏复选框，并将::after变为标签的::before。 - Brigand

Answer 1

你可以通过添加该属性来为mozilla浏览器启用复选框的自定义样式，这对我有效。-moz-appearance:initial

- Meet Zaveri

---

您，先生，是一个英雄。按预期工作。 - beatcoder

Answer 2

我尽力修复了它，尽可能地使其正常工作（如果存在更好的解决方案，我仍然很乐意）。我将所有选择器从```

```改为```

```和```
• ```。现在它看起来更像一个列表，而不是一堆无序的元素。希望这对您有所帮助！
  

  input[type=checkbox]::after
  

  为了

  input[type=checkbox] + label::after
  

  缺点:

  • 需要一个标签

  但是:

  • HTML 要求输入元素必须有标签

  结论:

  • 只对无效的 HTML 有影响

- Brigand

---

我遇到了完全相同的问题。你有没有找到另一种不需要标签的方法？ - lightswitch05

不，其他解决方案需要使用JavaScript来模拟标签的功能。 - Brigand

Answer 3

问题在于:after和::after在技术上会在伪元素被应用到的元素的最后一个子元素创建一个元素。Firefox不喜欢在其复选框内部创建子元素。这实际上是一个更大的主题，即替换元素。

您将看到与:before和::before伪元素相同的问题，因为它们将在所选择的元素中作为第一个子元素创建元素。

- Alex W

Answer 4

虽然在技术上不需要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>

使用兄弟选择器和 :after 元素来定位该 span（如上所示）。

不过在这一点上最好放入一个标签... :P

- Fivebears