1715064 - Select default background color changed from white to gray

Status: UNCONFIRMED

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

Description

[Matt Travis]

Attachment: select.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

Used unstyled selects on our website.

Actual results:

The default browser background color of unstyled selects changed to be gray from white with this release. Gray looks like it is disabled to our users so we have gotten some questions.

Expected results:

We expected the background style of unstyled selects to remain white.

Comment 1

[Matt Travis]

Setting background, border, or appearance styles sets the background to white so we suspect some default value is leaking through even though it doesn't show up in the browser computed styles. There could be other styles that affect it as well. I attached a test case html file.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Form Controls' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 3

[Emily McDonough [:alaskanemily]]

Emilio, does this look like it's caused by recent changes in non-native theming?

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Yeah, this is the new form control design.

The <select> (just like <button> etc) reacts to hover and keyboard, so it's the first time I've heard that it looks disabled tbh. I guess changing this again would need UX feedback, but it is pretty much an expected change.

Comment 5

[Matt Eason]

Attachment: Screenshot of form input elements in Firefox 94.0.1

We've just come across this issue in 94.0.1 and we've also had feedback that this change causes the <select> to look disabled.

It seems to be the only data entry form element that has a grey background by default.

Comment 6

[Alfonso Martinez]

Now whenever I'm using Firefox and there's a select I wonder, why is it disabled? Why does it have that ugly background?
And I'm always tempted to force a white background on all the selects, but that wouldn't be nice to the people that are using different color defaults, and it's boring being forced to fix this issues across different websites.

It's interesting that this very page is changing the default styling, I guess that so many sites are forcing background colors and that's why people don't notice this bug.

input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="text"], input[type="url"], input:not([type]), select, textarea {
box-sizing: border-box;
border: 1px solid var(--control-border-color);
border-radius: var(--control-border-radius);
box-shadow: none;
color: var(--control-foreground-color);
background-color: var(--control-background-color);
padding: var(--control-padding);
}