CSS ::before 的自定义复选框 - 在 Firefox/Edge 中不起作用

Question

我在尝试让项目跨浏览器工作时遇到了一个非常烦人的 CSS 问题（不关心 IE，这只是一个业余项目，但让它工作会很好至少在所有现代浏览器上）。它涉及一些我希望应用自定义样式的复选框 - 我知道你不能用标准 HTML <input type="checkbox"> 做很多事情所以我做了很多地方推荐的东西，并使用了::before 伪元素。我对 Chrome 中的结果感到满意。当我发现我的自定义复选框在 Firefox 中根本根本不显示时，想象一下我的惊讶吧！

我已经研究了几个小时，并且已经将它剥离回到问题的根源 - 它与复选框本身有关，而不是任何其他 CSS 它是互动。这是最基本的例子：

input[type="checkbox"] {
    visibility: hidden;
}

input[type="checkbox"]::before {
    visibility: visible;
    content: "";
    display: block;
    width: 1.1em;
    height: 1.1em;
    color: #eddc23;
    border: 1px solid #eddc23;
    background-color: #540123;
    border-radius: 35%;
    line-height: 1.27;
    text-align: center;
    cursor: pointer;
}

input[type="checkbox"]:checked::before {
    content: "13";
}

<input type="checkbox">

这应该显示一个深红色的复选框，选中时带有黄色勾号。它在 Chrome 和 Opera 上完美运行，但在 Firefox 或 Edge 上完全不运行。（这里有一个 CodePen link 以防 Stack Overflow 片段以某种方式表现出不同的行为）。 CSS 不是我的强项之一，尽管经过几个小时的试验和谷歌搜索，我还是感到困惑。

将不胜感激任何指点，不仅关于如何让这个跨浏览器工作，而且关于 为什么 它在 FF/Edge 上不起作用（检查元素在 Firefox 上根本没有显示 ::before 伪元素的迹象。我也排除了它与空 content 属性有关，因为将其更改为真实文本失败使其在相关浏览器中可见）。

Answer 1

有时使用标签可以解决此类问题

input[type="checkbox"] {
  display: none;
}

span {
  visibility: visible;
  content: "";
  display: block;
  width: 1.1em;
  height: 1.1em;
  color: #eddc23;
  border: 1px solid #eddc23;
  background-color: #540123;
  border-radius: 35%;
  line-height: 1.27;
  text-align: center;
  cursor: pointer;
}

input[type="checkbox"]:checked + label span::before {
  content: "13";
}

<input type="checkbox" id="checkbox">
<label for="checkbox">
  <span></span>
</label>

Answer 2

为了简单记录一下，我最后做的是将 <div> 作为复选框的下一个兄弟，用 opacity: 0; 隐藏复选框，并定位 div 在复选框顶部，但 z-index 较低。这意味着 "fake" 复选框以与真实复选框相同的方式响应，并且通过将实际复选框保留在 DOM 中，希望这仍然会在可访问性方面获得合理的分数。

CSS ::before 的自定义复选框 - 在 Firefox/Edge 中不起作用

Custom checkbox with CSS ::before - not working in Firefox/Edge

html

css

checkbox

cross-browser

pseudo-element