0

I'm using a checkbox with a CSS Psuedo element to display a star if an item is favourited or not. It's working on chrome but does not work on mozzilla/edge and potentially some other browsers. What would I need to add or change for it to work on other browsers.

<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;
}
Carl Wirkus
  • 523
  • 1
  • 8
  • 19

1 Answers1

1

Its because you are trying to apply a Pseudo-element to an input. You may want to change it to a button, and that might work better for you. Look at this answer here:

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

Taslack
  • 56
  • 6