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

【问题标题】：Custom checkbox with CSS ::before - not working in Firefox/Edge带有 CSS ::before 的自定义复选框 - 在 Firefox/Edge 中不起作用
【发布时间】：2019-04-25 22:07:30
【问题描述】：

我在尝试让项目跨浏览器运行时遇到了一个非常烦人的 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";
}

&lt;input type="checkbox"&gt;

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

不胜感激任何指示，不仅是关于如何让这个工作的跨浏览器，但关于 为什么它不能在 FF/Edge 上工作（检查 Firefox 上的元素没有显示::before 完全是伪元素。我还排除了它与空的 content 属性有关，因为将其更改为真实文本无法使其在相关浏览器中可见）。

【问题讨论】：

我从下面与@NishargShah 的讨论中得到了一些启发，这使我通过谷歌找到了this previous question。基本上，浏览器似乎可以使用::before 和::after 为<input> 等自关闭元素做他们喜欢的事情——这当然解释了不同的跨浏览器结果。如果有人可以提出建议，我仍然对不涉及非标签 <label> 的“好”解决方案感兴趣。

标签： html css checkbox cross-browser pseudo-element

【解决方案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>

【讨论】：

谢谢 - 这似乎确实适用于所有浏览器。可悲的是，这远非理想，因为实际上我有各种不同的动态生成的复选框，所以给它们 id 会有问题。而且我不喜欢 <label> 元素的这种完全非语义的使用。但它确实有效，我应该能够以某种方式对其进行调整，所以谢谢 :-) 你知道为什么这在 FF/Edge 上有效，而只有伪元素的原始版本却不是吗？
问题是 ::after 在技术上是创建一个元素作为伪选择器应用到的元素的最后一个子元素，而 ::before 是第一个子元素。 Firefox 不喜欢在其复选框内创建子项。
谢谢，这是有道理的——出于某种原因，我从未想过问题仅仅是<input>s 没有孩子！这给了我另一个解决它的想法，只需使用 div 而不是复选框。我马上就要去睡觉了，但谢谢你的帮助！
嗨，我现在已经满意地解决了这个问题，虽然不完全是这样，但并没有太大的不同，你的回答和随后的讨论，绝对是我找到解决方案的原因- 所以我决定接受。再次感谢。

【解决方案2】：

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

【讨论】：