我在尝试让项目跨浏览器工作时遇到了一个非常烦人的 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 链接，以防 Stack Overflow 代码段以某种方式表现出不同的行为）。CSS 不是我的强项之一，尽管进行了几个小时的试验和谷歌搜索，我还是很困惑。
希望得到任何指示，不仅是关于如何让这个跨浏览器工作，而且是关于为什么它不能在 FF/Edge 上工作（检查 Firefox 上的元素根本没有显示::before伪元素的迹象。我也排除它与空content属性有关，因为将其更改为真实文本无法使其在相关浏览器中可见）。
有时使用标签可以解决此类问题
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句