1394491 - Unable to style <optgroup> label's background

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect, P3)

Description

[silv3rwind]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20170825011442

Steps to reproduce:

See https://jsfiddle.net/silverwind/43yrgo3o/ which attempts to style a <select> for a dark user interface.


Actual results:

The `background: red` style is not rendered on the <optgroup label>, which keeps a white background.


Expected results:

It should be possible to style the background of the <optgroup label>. I've been looking into layout/style/res/forms.css, but couldn't find a conflicting user style on optgroup label:before.

Comment 1

[Josh Heidenreich]

Attachment: Minimal test case

This test case shows that if a background is applied to the SELECT then if shows on the select (when contracted) and also on the OPTIONs (when expanded) but not on the OPTGROUPs.

Test case also shows that direct styling of the OPTGROUP background color does not cause the color to be applied.

Comment 2

[Josh Heidenreich]

Attachment: Mimimal test case - screenshot - FF57 + OSX

This is a screenshot of the minimal test case on Firefox 57 + OS X.

Note too that the background of the OPTGROUPs is the system-provided, which on OS X is semi-transparent + gradient + blur effect. This isn't visible in the screenshot due to the white background, but is quite apparent if there is an image behind the drop down.

Comment 3

[Firefox Bug Husbandry Bot]

https://wiki.mozilla.org/Bug_Triage/Projects/Bug_Handling/Bug_Husbandry#Move_fix-optionals

Comment 4

[Jet]

Fix optional, Mozilla cracks me up. 

Please fix, my retinas will thank you.

Comment 5

[Martin Vendl]

This actually works for me (Nightly 63), but there's definitely something fishy in relation to bug 1421373.

Comment 6

[Jet]

Still broken with FF stable 67.0

Comment 7

[Emilio Cobos Álvarez [:emilio]]

This is the code that handles it: https://searchfox.org/mozilla-central/rev/7556a400affa9eb99e522d2d17c40689fa23a729/toolkit/modules/SelectParentHelper.jsm#405

Somebody needs to look at why the optgroup background is not getting inserted in the stylesheet or otherwise not honored.

Comment 8

[Arno Welzel]

I have the same problem, tested with FF 77.0.1 in Windows 10. See https://arnowelzel.de/en/tools/spoke-length-calculator.

All optgroup labels are with a light grey background even though they should be white. In "dark mode" the dark background is also ignored. As a workaround I styled the text for optgroup elements with a medium grey (#888) so it stays at least readable in dark mode since other browser.

Comment 9

[Arno Welzel]

(In reply to Arno Welzel from comment #8)

I have the same problem, tested with FF 77.0.1 in Windows 10. See https://arnowelzel.de/en/tools/spoke-length-calculator.

All optgroup labels are with a light grey background even though they should be white. In "dark mode" the dark background is also ignored. As a workaround I styled the text for optgroup elements with a medium grey (#888) so it stays at least readable in dark mode since other browser.

As a workaround I now use a minimal different background-color:

select, option { background-color: #fff; color: #000 }
optgroup { background-color: #fffffe; color: #000 }

Visually you barely see a difference, but at least Firefox will not ignore this background colour.

As a minimal test case to verify this bug and to see the result of the workaround see here:

https://arnowelzel.de/samples/optgroup-styling.html

Comment 10

[Emilio Cobos Álvarez [:emilio]]

Ah! interesting, thanks!

So this is this check, which prevents us from adding the relevant CSS rule, and then this rule which prevents us from actually using the background color from the <select>.

So I think that rule should be removed, ideally, or if it's not possible, then we need to figure out something else.

Comment 11

[Emilio Cobos Álvarez [:emilio]]

(That CSS is windows-only, which is why I couldn't reproduce here from Linux)

Comment 12

[Nicolas Hoffmann]

Any update for this fix? We also have the issue on ProtonMail v4 in the Advanced search in dark mode. :-\

Comment 13

[Arno Welzel]

As already mentioned: as a workaround you may use slightly different colors, that's what I do at https://arnowelzel.de/en/tools/spoke-length-calculator:

option {
background-color: #ffffff;
}

optgroup {
background-color: #fffffe;
}

Visually there is no noticable difference between the option group header and the options, but it's enough for Firefox to paint the option group headers with the given color.

Comment 14

[Emilio Cobos Álvarez [:emilio]]

There's also a suggested fix in comment 10. I guess I can boot on Windows and test my suggested fix, I was on Linux when writing that and it fell off my radar (but it's a relatively easy patch to write hopefully).

Comment 15

[Emilio Cobos Álvarez [:emilio]]

Most of the test-cases here work data:text/html,<select style="background: red"><optgroup label="Foo"><option>Bar</option><option>Baz</option></optgroup></select> is bug 1421373 and is an issue only on windows. Patch incoming.

Comment 16

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1394491 - Don't override menucaption background for content selects. r=mconley,Gijs

So that they use the select background color by default. The code in
SelectParent expects this when figuring out whether to set background colors
too. This matches other browsers and MacOS, see:

data:text/html,<select style="background: red"><optgroup label="foo"><option>Bar</option><option>Baz</option></optgroup></select>

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/dec7fb125a71
Don't override menucaption background for content selects. r=mconley

Comment 18

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/dec7fb125a71

Comment 20

[Timea Zsoldos [:tzsoldos], Desktop QA]

I have reproduced this issue using Firefox 57.0a1 (2017.08.25) on macOS 10.15.
I can confirm this issue is fixed, I verified using Firefox 84.0b4, on macOS 10.15, Windows 8.1 x64 and Ubuntu 18.04 x64.