自定义复选框在 Firefox 上失败答案

【问题标题】：Custom Checkboxes Failing on Firefox自定义复选框在 Firefox 上失败
【发布时间】：2013-08-26 08:48:42
【问题描述】：

我正在尝试使用 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 上一样？

期望：

不需要：

【问题讨论】：

纯 CSS 是不可能的。网址：stackoverflow.com/questions/2587669/…
其他Mozilla链接：forums.mozillazine.org/viewtopic.php?f=25&t=291007
抱歉，我修好了图片。所以后面的文本 is 出现在 Firefox 上，但没有显示边框半径或框阴影。我什至愿意以某种方式隐藏复选框。我正在尝试隐藏复选框，并将标签的::after 设为::before。

标签： css firefox checkbox

【解决方案1】：

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

切换了所有选择器

input[type=checkbox]::after

到

input[type=checkbox] + label::after

缺点：

需要标签

但是：

HTML 要求输入元素有标签

结论：

只对无效的 HTML 不利

【讨论】：

我遇到了同样的问题。你有没有找到另一种不需要标签的方法？
不，唯一的其他解决方案需要 JavaScript 来模仿标签的功能。

【解决方案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>

使用同级选择器和 :after 元素定位 span。

此时不妨贴个标签吧……:P

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

-moz-appearance:initial

【讨论】：

先生，您是英雄。按预期工作。