CODEWITHSUNDEEP
htmlcssfirefox
Carl Wirkus
Carl Wirkus

Reputation: 643

Pseudo before element with css content not showing on Firefox/ Edge

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;
}

Upvotes: 0

Views: 1280

Answers (1)

Taslack
Taslack

Reputation: 56

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

Upvotes: 1

Related Questions