Jetpack: Admin Page: improve checkbox status in Firefox

[jeherve]

The checkboxes displayed in Jetpack Admin Settings display differently depending on your browser:

Here is how it looks in Chrome Version 56.0.2924.87 (64-bit), on Mac:

And in Firefox 51.0.1 (64-bit), on Mac:

In Firefox, the checkboxes look a lot better when I remove a -moz-appearance: none; rule:

It would be nice to update the checkboxes to get a similar look across browsers.

[singerb]

FYI the issue I originally reported was on Windows. Realized I never said that. :-(

[jeherve]

@singerb Could you post screenshots of how things look like for you on Windows? Thanks!

[singerb]

Here we go!

Chrome, looks fine:

Firefox, checkbox checked but nothing showing:

Firefox, checkbox checked and -moz-appearance: none removed:

[ashleighaxios]

Will the current settings work will make this issue obsolete? Cc @MichaelArestad @eliorivero

[eliorivero]

It won't be an issue with checkboxes... because we no longer have checkboxes! :D But it's now an issue with radio buttons.
The reason (for both radio buttons and checkboxes) is that WP core uses :before to add the styling, which works fine in Chrome

but not in Firefox

and that's because Firefox adheres to the standard and doesn't allow :before in input elements since they're not a container of other elements like span, div or p are.

Adding -moz-appearance: none; in this case actually makes them look uglier:

[MichaelArestad]

@eliorivero nice. I think we can live this for now since it matches core behavior, but might be a nice future improvement.

[stale[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[jeherve]

Closing this for now because of the lack of activity on this. We can always reopen in the future if needed.