Duplicated checkbox and radios on PaleMoon

[em92]

Hi! Nice css!

Here are some duplicates from https://jdan.github.io/98.css/:
http://i.imgur.com/2uUluIv.png
http://i.imgur.com/o3kHimb.png

PaleMoon 28.9.1

[jdan]

It looks like PaleMoon is not respecting -moz-appearance: none which may be a bug on their end?

Many of the examples in https://code-boxx.com/simple-pure-css-custom-checkbox/ work in this browser as well.

If I add display: none to the element it breaks accessibility, which is a no-go unfortunately.

[Lootyhoof]

-moz-appearance: none is perfectly functional in Pale Moon. It is used to apply styling to system controls. In your case though instead of doing that you seem to ignore the real one and add a "fake" one later.

To make the duplication go away you need to add display: none to the radio and checkbox elements, as your real ones look to be in a ::before of the label anyway.

[jdan]

@Lootyhoof unfortunately display: none breaks accessibility for these controls so I had to shy away from that

58ae88c adds position: fixed and opacity: 0 as a stopgap here, but for the record appearance: none is enough to hide the thing in chrome, mobile safari, and firefox 75. I am unsure where in the spec it's determined that radios/checkboxes should be hidden with appearance: none.

@em92 thanks for reporting, wanna give this another whirl?

[em92]

@jdan checked again. It is fixed.
Thank you!