1702847 - Poor contrast on some select menus with macos system appearance

Status: RESOLVED FIXED

(Core :: Widget, defect)

Description

[Emilio Cobos Álvarez (:emilio)]

data:text/html,<select style="color: rgb(10,10,10)"><option>abc</option><option>def</option>.

I found this on the duo website (the auth select popup). I'm still not sure if this is also an issue on windows.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1702847 - Ensure we set the select background from content if either background or color is set. r=Gijs

This is also an issue with proton in dark mode, and I think that this solution
is sensible.

Comment 3

[Florens Verschelde :fvsch]

Attachment: styled-select-macos-bigsur.png

Does this patch bring Firefox closer to fixing the following issue with <select> dropdowns on macOS?

On macOS Big Sur, comparing Firefox Nightly 2021-04-02 with widget.macos.respect-system-appearance=true to Chrome and Safari (stable).

The test case is from an internal design system I’m working on. Roughly the styles are set on the <select> element, and <option> elements are not styled at all (the Inspector only shows inherited styles for <option> elements). Styles on the <select> include:

• appearance: none
• custom color and background-color
• custom border and border-radius
• custom padding

In Safari and Chrome, the select dropdown uses the Big Sur native style and is unaffected by author styles. In Firefox, it uses a non-standard style and seems to use the color and background-color from the select element (especially obvious with peculiar colors, see third column in screenshot).

Ideally any change would get Firefox closer to Safari and Chrome here.
But if that’s not possible, is it possible to restrict which styles get inherited and applied to option elements, and maybe only apply custom color and background-color to option elements when they are targeted directly?

/* only applies to the select button, not to the dropdown or options */
select {
  color: blue;
  background: lime;
}

/* may apply to the select options */
option {
  color: purple;
  background: pink;
}

I guess styling of select elements is under-specified, which is what https://open-ui.org/components/select tries to move forward?

Comment 4

[Emilio Cobos Álvarez (:emilio)]

No, this shouldn't change behavior in your page. What you want is something close to what you get with dom.forms.select.customstyling=false right? (Perhaps respecting font-size)

If so, that's technically easy to achieve, but it's more of a ux / product decision.

Comment 5

[Florens Verschelde :fvsch]

Looks like it! Thanks for the info.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4cb2d77f64d3
Ensure we set the select background from content if either background or color is set. r=Gijs

Comment 7

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/4cb2d77f64d3