search

FirefoxUX / photon-components-web

INACTIVE - http://mzl.la/ghe-archive - Photon versions of the some common WebComponents
https://FirefoxUX.github.io/photon-components-web/
Mozilla Public License 2.0
29 stars 11 forks source link

Stop using ::after hack for checkboxes/radios #59

Closed nt1m closed 5 years ago

nt1m commented 5 years ago

The markup for checkboxes should just be <input type="checkbox" class="checkbox">, nothing else... It doesn't make sense IMO to force putting a label as a wrapper and as a sibling element.

Plus, Firefox and Chrome (and possibly other major browsers, but I haven't checked), support styling <input type="checkbox"> directly using -moz-appearance: none;

lmorchard commented 5 years ago

My CSS isn't very strong - which is probably why I used the ::after hack. Can you point to any working examples of how to improve the styling here?

nt1m commented 5 years ago

https://searchfox.org/mozilla-central/source/toolkit/themes/shared/in-content/common.inc.css#472-490,497-506

lmorchard commented 5 years ago

TIL about -{webkit,moz}-appearance: none - seems to work on Chrome, Edge, and Firefox!