search

jdan / 98.css

A design system for building faithful recreations of old UIs
https://jdan.github.io/98.css
MIT License
9.17k stars 301 forks source link

Duplicated checkbox and radios on PaleMoon #76

Closed em92 closed 4 years ago

em92 commented 4 years ago

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 commented 4 years ago

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

image

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 commented 4 years ago

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

Removed duplicate

jdan commented 4 years ago

@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 commented 4 years ago

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