New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
nt1m opened this Issue Nov 8, 2018 · 3 comments

Comments

Projects
None yet
2 participants
@nt1m

nt1m commented Nov 8, 2018

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;

@nt1m nt1m changed the title from Stop using ::after hack for checkboxes to Stop using ::after hack for checkboxes/radios Nov 8, 2018

@lmorchard

This comment has been minimized.

Collaborator

lmorchard commented Nov 8, 2018

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?

lmorchard added a commit to lmorchard/photon-components-web that referenced this issue Nov 8, 2018

lmorchard added a commit to lmorchard/photon-components-web that referenced this issue Nov 8, 2018

lmorchard added a commit to lmorchard/photon-components-web that referenced this issue Nov 8, 2018

@lmorchard lmorchard referenced a pull request that will close this issue Nov 8, 2018

Open

Drop checkbox label hacks in favor of -moz-appearance #60

lmorchard added a commit that referenced this issue Nov 8, 2018

lmorchard added a commit that referenced this issue Nov 8, 2018

@lmorchard

This comment has been minimized.

Collaborator

lmorchard commented Nov 8, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment