Custom Checkboxes Failing on Firefox
checkbox, css, firefox
Solution
I managed to fix it as much as seems possible (I'd still love a better solution, if one exists). I switched all of the selectors from
input[type=checkbox]::after
to
input[type=checkbox] + label::after
Downside:
- requires a label
But:
- HTML requires input elements to have a label
Conclusion:
- only bad for invalid HTML
Problem
I'm trying to make custom checkboxes with CSS3, which is working great on Chrome. On Firefox... not so much. Edit: it seems to be working fine on Firefox 37. The answer below is still relevant, but the style related issues from mid 2013 are resolved. IE support isn't mentioned here but edits/answers regarding it are welcome. demo The HTML: ``` <input type="checkbox" id="first"/> <label for="first">This is pretty awesome</label> ``` The CSS: ``` input[type=checkbox] { appearance: none; background: transparent; position: relative; } input[type=checkbox]::after { position: absolute; top: 0; left: 0; content: ''; text-align: center; background: #aaa; display: block; pointer-events: none; opacity: 1; color: black; border: 3px solid black; } input[type=checkbox] + label { line-height: 48px; margin: 0 15px 0 15px; } input[type=checkbox]:hover::after { content: ''; background: #32cd32; opacity: .3; } input[type=checkbox]:checked::after { content: '\2713'; background: #32cd32; } input[type=checkbox]:checked:hover::after { opacity: 1; } input[type=checkbox], input[type=checkbox]::after { width: 48px; height: 48px; font-size: 46px; line-height: 48px; vertical-align: middle; border-radius: 50%; } * { box-sizing: border-box; margin: 0; padding: 0; } ``` Note: I removed vendor prefixes, and things like user-select for brevity. The full code is in the pen. What do I need to change to have it look the same on Firefox as it does on Chrome? Desired: Not desired: