Custom checkbox with CSS ::before - not working in Firefox/Edge - html

Question

I have come up against a very annoying CSS issue while trying to get a project working cross-browser (not bothered about IE, it's only a hobby project, but it would be nice to get it working on all modern browsers at the very least). It relates to some checkboxes which I wish to apply custom styles to - I know you can't do very much with the standard HTML <input type="checkbox"> so I have done what is recommended in many places, and used a ::before pseudo-element. And I was pleased with the result in Chrome. Imagine my surprise when I find that my custom checkbox simply doesn't display at all in Firefox!
I've been playing with this for a few hours and have stripped it right back to the very root of the problem - and it's something to do with the checkbox itself, rather than any other CSS it's interacting with. Here's the bare minimum example:
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">
This should show a dark red checkbox which has a yellow tick when selected. It works perfectly on Chrome and Opera, but not at all on Firefox or Edge. (Here's a CodePen link of the same in case the Stack Overflow snippet somehow exhibits different behaviour). CSS isn't one of my strong points and despite a few hours of experimenting and googling, I'm baffled.
Would appreciate any pointers, not only as to how to get this working cross-browser, but as to why it's not working on FF/Edge (inspecting the element on Firefox shows no sign of a ::before pseudo-element at all. I've also ruled out it being to do with the empty content property, since changing that to real text fails to make it visible in the browsers concerned).

Answer 1

Sometimes with labels you can solve this type of problems
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>

Answer 2

Just to record it in brief, what I ended up doing was putting a <div> as the next sibling of the checkbox, hiding the checkbox with opacity: 0;, and positioning the div on top of the checkbox but with lower z-index. This means that the "fake" checkbox responds in the same way a real one would, and by keeping the actual checkbox in the DOM hopefully this would still score reasonably on accessibility.

Answer 3

You should reset the appearance:
input[type=checkbox] {
/* Reset */
-webkit-appearance: none;
appearance: none;
background-color: #fff;
}
But the best way is here: https://moderncss.dev/pure-css-custom-checkbox-style/
Example snippet:
/* Checkboxes */
input[type=checkbox] {
/* Reset */
-webkit-appearance: none;
appearance: none;
background-color: #fff;
width: 0;
height: 0;
margin: 0;
margin-right: 25px;
position: relative;
text-align: center;
font-size: 16px;
}
input[type=checkbox]:focus {
box-shadow: none;
outline: none;
}
input[type=checkbox]::before {
content: '';
position: absolute;
top: -16px;
display: block;
width: 20px;
height: 20px;
border: 1px solid #23151d;
background: #fff;
box-sizing: content-box;
border-radius: 3px;
}
input[type=checkbox]:checked::before {
border: 1px solid #e63244;
background: transparent;
background: #e6324403;
}
input[type=checkbox]::after {
content: '✓';
text-indent: 4px;
position: absolute;
top: -14px;
display: none;
width: 20px;
height: 20px;
box-sizing: content-box;
text-align: center;
}
input[type=checkbox]:checked::after {
display: block;
color: #e63244;
}
/* / Checkboxes */
<p>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox" checked>
</p>