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

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.)

Thanks in advance.