带有CSS：：before的自定义复选框-在Firefox/Edge中无效

bhmjp9jg 于 2023-01-18 发布在其他

关注(0)|答案(3)|浏览(226)

我遇到了一个非常恼人的CSS问题，而试图让一个项目的工作跨浏览器（不关心IE，它只是一个业余爱好项目，但至少能让它在所有现代浏览器上工作会很好）。它涉及到一些我希望应用自定义样式的复选框-我知道你可以'我对标准的HTML<input type="checkbox">做得不多，所以我做了许多地方推荐的东西，并使用了一个::before伪元素。我对Chrome的结果很满意。想象一下当我发现我的自定义复选框根本不显示 * 时我有多惊讶。在火狐浏览器中!
我已经研究了几个小时，并且已经把它剥离到问题的根源--它与复选框本身有关，而不是与任何其他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属性有关，因为将其更改为真实文本无法使其在相关浏览器中可见）。

css

来源：https://stackoverflow.com/questions/55858255/custom-checkbox-with-css-before-not-working-in-firefox-edge

3条答案

按热度按时间

ymdaylpp1#

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

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>

赞(0）回复(0）举报 2023-01-18

kknvjkwl2#

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

赞(0）回复(0）举报 2023-01-18

roejwanj3#

您应该重置外观：

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

但最好的方法是在这里：https://moderncss.dev/pure-css-custom-checkbox-style/
示例片段：
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-01-18

我来回答

带有CSS：：before的自定义复选框-在Firefox/Edge中无效

3条答案

相关问题

热门标签

最新问答