Encountering a frustrating CSS challenge while working on a project that needs to be compatible across various browsers. Specifically, I'm having issues with custom styling for checkboxes. Despite following recommendations to use a ::before pseudo-element due to the limitations of standard HTML <input type="checkbox">, my customized checkbox looks perfect in Chrome but doesn't show up at all in Firefox.
After spending hours troubleshooting, it seems like the problem lies with the checkbox itself rather than any other CSS properties. The code snippet below demonstrates the core issue:
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">The goal is to have a dark red checkbox with a yellow tick when selected. While this works flawlessly in Chrome and Opera, it fails to render correctly in Firefox or Edge. Seeking advice not only on achieving cross-browser functionality but understanding why Firefox/Edge are not displaying the custom styles (even inspecting the element in Firefox shows no trace of the ::before pseudo-element). The possible culprit isn't the empty content property, as substituting it with actual text still doesn't resolve the issue in these browsers).