自定义 CSS 复选框不适用于 Mozilla，适用于所有其他浏览器答案

【问题标题】：Custom CSS Checkbox not working for Mozilla, works every other browser自定义 CSS 复选框不适用于 Mozilla，适用于所有其他浏览器
【发布时间】：2018-01-10 06:16:38
【问题描述】：

我为投票创建了一个自定义复选框，我在 Chrome 上开发，但是一旦我完成了浏览器测试，它根本不适用于 firefox。我在 codepen 中附加了我的代码副本。除了伪类之前和之后，还有其他方法可以构建自定义复选框吗？

 [1]: https://codepen.io/Edward-Developer/pen/NvRbzR


HTML

    <div class="img-icon-wrapper">
      <p>            
       <span class="wpcf7-form-control-wrap checkbox-972"><span class="wpcf7-form-
       control     wpcf7-checkbox wpcf7-exclusive-checkbox lori"><span 
       class="wpcf7-list-item first       last"><label><input type="checkbox" 
       name="checkbox-972" value="Lori St. Louis" />     <span class="wpcf7-list-
       item-label">Lori St. Louis</span></label></span></span>       </span>
      </p>
   </div>

CSS


input:before {
    position: absolute;
  width: 38px;
  background: #fff;
  height: 38px;
  content: "";
  border: 5.2px solid blue;
  top: 0;
}

input:before {
    position: absolute;
  width: 38px;
  background: #fff;
  height: 38px;
  content: "";
  border: 5.2px solid $lightBlue;
  top: 0;
}

input[type="checkbox"]:checked:after {
    position: relative;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -4px;
    content: "✓";
    height: 41px;
    width: 19px;
    -webkit-transform: rotate(7deg) skew(0deg);
    left: 8px;
    bottom: 38px;
    font-size: 65px;

}
input[type="checkbox"]:hover:checked:after {
  border-color: $darkBlue;
}

input[type="checkbox"]{
  margin-left:0;
}

【问题讨论】：

密码笔在哪里？
编辑您的问题并在此处添加来自 codepen 的代码。
@JasonSpradlin 不需要 codepen 或小提琴。 OP 必须在他们的问题中包含minimal reproducible example，他们还可以使用内置的 sn-p 对其进行格式化以使其可执行。
抱歉延迟！我刚刚检查了，codepen 没有通过，在这里！
我们不需要密码笔。阅读上面的 cmets。您需要将代码放入您的问题中。如果您的问题中没有代码，如果 codepen 消失、无法访问或被阻止，那么您的问题对未来的访问者将失去所有价值。

标签： css input cross-browser

【解决方案1】：

我有同样的问题。最后我通过添加一个属性使复选框可见

-moz-appearance:initial

此属性本机（基于平台）应用它作为操作系统主题的外观。

【讨论】：

【解决方案2】：

如果我理解正确，当父元素不呈现子元素时，Firefox 会忽略 :before 和 :after。因此，:before 和 :after 不适用于 type=checkbox 的输入。

有关应该跨浏览器工作的替代方法，请参阅：https://stackoverflow.com/a/21863085/542047

【讨论】：