时间戳

首页 > 解决方案 > CSS之前和之后

html - CSS之前和之后

问题描述

我试图让一些 CSS 在 Firefox 中工作，但我似乎无法弄清楚为什么它不起作用。

选中时应显示星号，未选中时应显示未选中星号

我有一种感觉，这与 Firefox 处理前后的方式有关，但不知道该去哪里。

它适用于 chrome 任何指针都会非常有帮助。

.star {
    visibility:hidden;
    font-size:30px;
    cursor:pointer;
}
.star:before {
   content: "\2605";
   position: absolute;
   visibility:visible;
}
.star:checked:before {
   content: "\2606";
   position: absolute;
}
  <input class="star" type="checkbox" title="bookmark page"><br/><br/>
  <input class="star" type="checkbox" title="bookmark page" checked><br/><br/>

标签： htmlcssfirefox

解决方案

显然问题在于伪元素需要它们的元素有内容，而输入元素没有内容。

我不声称自己理解这一点，因为 Edge 和 Chrome 会做我们可能期望的事情并允许伪元素。对此进行了讨论:before && :after 伪元素没有显示 Firefox虽然有些已经过时了，但@kevinkatzke 在 2020 年 1 月的回答将我们指向 MDN 文档https://developer.mozilla.org/en-US/ docs/Web/CSS/appearance解决方法。

这是为了将其-moz-appearance: initial;放入您的样式表中。试试这个片段。尽管文档中有警告说它不是标准，但它似乎有效。

input[type=checkbox] {
  -moz-appearance:initial;
}
.star {
    visibility:hidden;
    font-size:30px;
    cursor:pointer;
}
.star:before {
   content: "\2605";
   position: absolute;
   visibility:visible;
}
.star:checked:before {
   content: "\2606";
   position: absolute;
}
<input class="star" type="checkbox" title="bookmark page"><br/><br/>
<input class="star" type="checkbox" title="bookmark page" checked><br/><br/>

推荐阅读