1941755 - Update default web content style of radio buttons and checkboxes

Status: RESOLVED FIXED

(Core :: Widget, enhancement)

Description

[Juliana Gaibler [:juliana]]

After discussing this with various people we decided to update the style of our web-content checkboxes and radio buttons.

The changes boil down to this:

• Reduce border width from 2px to 1px for both
• Checked radio buttons should have a single white circle in the center

I don't know how feasible this is, but it'd be also nice if our checkmark looked less jagged. Let me know if I can help with that in any way!

Comment 1

[Juliana Gaibler [:juliana]]

Attachment: Comparison between the current and proposed styles

Comment 2

[Juliana Gaibler [:juliana]]

Attachment: helpful-image.png

Hello!
We had another discussion around this and rounded out the proposed changes for the focus outline, which are:

1. The default style should match how outline-style: auto looks like today. 2px accent color border and then a 1px white border
2. For our radio buttons and checkboxes, we need a special case where first there is a 2px white border followed by a 2px accent color border

Comment 3

[Emilio Cobos Álvarez [:emilio]]

why 2px + 2px? It'd be nice to keep the outline offsets consistent...

Comment 4

[Emilio Cobos Álvarez [:emilio]]

So changing the border width is trivia, patch attached.

But I'd be skeptic about changing the checked appearance because it makes distinguishing <input type=radio> from <input type=radio checked disabled> quite hard, IMHO. wdyt?

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1941755 - Tweak checkbox border size per UX feedback. r=spohl,mstange,#layout

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1941755 - Tweak checked radio rendering as per UX feedback. r=spohl,mstange,#layout

Comment 7

[Emilio Cobos Álvarez [:emilio]]

Another question is how should the single-dot version render at different sizes, e.g.:

data:text/html,<input type=radio checked style="width: 50px; height: 50px;"><input type=radio checked style="width: 6px; height: 6px">

I went for half the checkbox size and I think it looks nice and that also solves comment 4 (as the checked border is much thicker).

Comment 8

[Emilio Cobos Álvarez [:emilio]]

I'll land that for now so you can see how it looks next nightly, we can tweak the 2px + 2px outline if you want in a follow-up, same for the dot thing (or we can always back out)

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d55482b5a5e6
Tweak checkbox border size per UX feedback. r=mstange
https://hg.mozilla.org/integration/autoland/rev/7e78ec00dfe4
Tweak checked radio rendering as per UX feedback. r=mstange
https://hg.mozilla.org/integration/autoland/rev/6b9105fcdcd4
apply code formatting via Lando

Comment 10

[amarc]

Backed out for causing reftest failures @ checkbox-clamp-01.html

• Backout link
• Push with failures
• Failure Log
• Failure line:

REFTEST TEST-UNEXPECTED-FAIL | layout/reftests/forms/input/checkbox/checkbox-clamp-01.html == layout/reftests/forms/input/checkbox/checkbox-clamp-01-ref.html | image comparison, max difference: 1, number of differing pixels: 3

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/27cc29112880
Tweak checkbox border size per UX feedback. r=mstange
https://hg.mozilla.org/integration/autoland/rev/23accc252467
Tweak checked radio rendering as per UX feedback. r=mstange
https://hg.mozilla.org/integration/autoland/rev/481bdd9544eb
apply code formatting via Lando

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/81d3f4ef3f78
Test is fuzzy on Linux too.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ba75a8e0c246
Annotate some .optional baseline tests as failing on mac due to font baseline dependencies.
https://hg.mozilla.org/integration/autoland/rev/677567a3bccc
Add a meta viewport to a WPT to prevent android fuzz. CLOSED TREE

Comment 14

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/50114 for changes under testing/web-platform/tests

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c1bfef78c8e1
Backed out changeset 677567a3bccc for being an incomplete fix
https://hg.mozilla.org/integration/autoland/rev/4f612a4f2b91
Add a meta viewport to a WPT to prevent android fuzz.

Comment 16

[amarc]

Backed out 6 changesets (Bug 1941755) for causing wr3 failures @ transform-input-018.html
Failure log
Failure line:

TEST-UNEXPECTED-FAIL | /css/css-transforms/transform-input-018.html | Testing http://web-platform.test:8000/css/css-transforms/transform-input-018.html == http://web-platform.test:8000/css/css-transforms/transform-input-018-ref.html

Comment 17

[Pulsebot]

Backout by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3a8dccec15db
Backed out 6 changesets for causing wr3 failures @ transform-input-018.html

Comment 18

[Cosmin Sabou [:CosminS]]

Also these type of failures: https://treeherder.mozilla.org/logviewer?job_id=490365850&repo=autoland&lineNumber=25628

Comment 19

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2606ec966d5c
Tweak checkbox border size per UX feedback. r=mstange
https://hg.mozilla.org/integration/autoland/rev/c2dd557f5734
Tweak checked radio rendering as per UX feedback. r=mstange
https://hg.mozilla.org/integration/autoland/rev/236a7b7aee3b
apply code formatting via Lando

Comment 21

[Juliana Gaibler [:juliana]]

Attachment: more-images-oh-no.png

Sorry I just noticed that I put my message for bug 1941755 in here too (comment 2) 😔 But looks like you figured it out!

The new focus outline for text inputs looks great! Thank you!!

Re your comments:

why 2px + 2px? It'd be nice to keep the outline offsets consistent...

I would also love to keep them consistent just worry about DPR 1 screens where the white border inside gets kind of swallowed. I attached a screenshot. What do you think?

But I'd be skeptic about changing the checked appearance because it makes distinguishing <input type=radio> from <input type=radio checked disabled> quite hard, IMHO. wdyt?

I went for half the checkbox size and I think it looks nice and that also solves comment 4 (as the checked border is much thicker).

Having the inner white circle be 50% of the blue circle looks good!

I'm not sure I understand your concern with the disabled state. In the screenshot I also added how I mocked up the radio buttons in Figma, is that not what they are going to look like? Or am I missing something?

Comment 22

[Norisz Fay [:noriszfay]]

Backed out for causing reftest failure on radio-clamp-01.html

Backout link

Push with failures

Failure log

Comment 23

[Emilio Cobos Álvarez [:emilio]]

Gah, sorry, I misread the failure above and thought it was the checkbox-clamp subtest, not radio-clamp :(

Third time's the charm.

Comment 24

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6ddca6904545
Tweak checkbox border size per UX feedback. r=mstange
https://hg.mozilla.org/integration/autoland/rev/95af8fcb06d6
Tweak checked radio rendering as per UX feedback. r=mstange

Comment 25

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/67ac7d561312
Reftest-snapshot is slightly more fuzzy.

Comment 26

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/6ddca6904545
https://hg.mozilla.org/mozilla-central/rev/95af8fcb06d6
https://hg.mozilla.org/mozilla-central/rev/67ac7d561312

Comment 27

[Eugene Savitsky]

We heavily use radio buttons in our company webUI. Now it is harder to see it even on white background.

Please revert it or all company have to move to Chrome-based browsers, that displays radio-buttons in classic way.

Why anyone would change radio-button design, that was ages around and is de-facto a standard for all browsers? :-/

Comment 28

[Eugene Savitsky]

Attachment: 2025-03-10_11-01-06.png

Comment 29

[Eugene Savitsky]

FYI https://www.reddit.com/r/firefox/comments/1j62f0o/new_radio_button_designany_way_to_change_it_back/

Comment 30

[Juliana Gaibler [:juliana]]

Hey Eugene, thanks for the feedback! We know UI changes can take some getting used to, and I appreciate you sharing your concerns.

I’ve just filed bug 1952998 to adjust the design by making the white circle smaller so the blue stands out more—hopefully, that helps with visibility.

To anwer your other question: The update was made to better align with how radio buttons look in native UI across Windows, macOS, and Linux. Chrome’s version isn’t actually the “classic” look. This change also improves some accessibility aspects, particularly around focus states.

We’re not planning to revert to the old design, but I would like to better understand any specific issues you’re having, so I can see if there are any further adjustments that would make sense.

Appreciate you taking the time to share your thoughts!