带有 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链接，以防堆栈溢出代码段以某种方式表现出不同的行为)。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>

Answer 2

简而言之，我最终所做的是将<div>作为复选框的下一个同级，用opacity: 0;隐藏复选框，并将div 放置在复选框的顶部，但 z 索引较低。这意味着"假"复选框的响应方式与真实复选框相同，并且通过将实际复选框保留在 DOM 中，希望这仍然可以在可访问性上获得合理的分数。

Answer 3

您应该重置外观：

input[type=checkbox] {
/* Reset */
-webkit-appearance: none;
appearance: none;
background-color: #fff;
}

但最好的方法在这里：https://moderncss.dev/pure-css-custom-checkbox-style/

示例代码段：

/* Checkboxes */
input[type=checkbox] {
/* Reset */
-webkit-appearance: none;
appearance: none;
background-color: #fff;

width: 0;
height: 0;
margin: 0;
margin-right: 25px;
position: relative;
text-align: center;

font-size: 16px;
}
input[type=checkbox]:focus {
box-shadow: none;
outline: none;
}
input[type=checkbox]::before {
content: '';
position: absolute;
top: -16px;
display: block;
width: 20px;
height: 20px;
border: 1px solid #23151d;
background: #fff;
box-sizing: content-box;
border-radius: 3px;
}
input[type=checkbox]:checked::before {
border: 1px solid #e63244;
background: transparent;
background: #e6324403;
}
input[type=checkbox]::after {
content: '✓';
text-indent: 4px;
position: absolute;
top: -14px;
display: none;
width: 20px;
height: 20px;
box-sizing: content-box;
text-align: center;
}
input[type=checkbox]:checked::after {
display: block;
color: #e63244;
}
/* / Checkboxes */

<p>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox" checked>
</p>