html - 带有 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: "\2713";
}

<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: "\2713";
}

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