具有css内容的元素之前的伪元素未在Firefox / Edge上显示

Question

我使用带有CSS Psuedo元素的复选框，以便在项目受欢迎时显示星标。它正在使用chrome，但无法在mozzilla / edge和其他一些浏览器上运行。我需要添加或更改它才能在其他浏览器上运行。

<input class="star favoriteStar" type="checkbox" title="bookmark page" value="781611">

.star {
    visibility: hidden;
    font-size: 30px;
    cursor: pointer;
    margin-right: 15px;
}

.star:before {
    content: "\2605";
    position: absolute;
    visibility: visible;
    margin-top: -13px;
}

.star:checked:before {
   content: "\2606";
   position: absolute;
   margin-top: -13px;
}

Answer 1

因为您正在尝试将Pseudo-element应用于输入。您可能希望将其更改为按钮，这可能对您更有效。看看这个答案：

https://stackoverflow.com/a/4660434/7520831