Inline Select component needs background in Chrome/Windows

[brunnerh]

What package(s) are you using?

• carbon-components
• carbon-components-react
• carbon-components-svelte

Detailed description

In Chrome on Windows a <select> background needs to be set to fit the <color>, otherwise the options can become unreadable. This is very OS and browser-specific; e.g. it is not a problem for Firefox on Windows or Chrome on Mac.

Affected is the <Select> component with the inline class set without mouse hover in a dark theme. E.g. used in <Pagination>.

With hover (CSS sets background):

Without hover:

Steps to reproduce the issue

1. Use dark theme
2. Add <Pagination>
3. Open one of the dropdowns
4. Move mouse away

The official component page demonstrates this behavior.

Additional information

Relevant CSS that seems to cause this:

.bx--select--inline .bx--select-input {
    ...
    background-color: transparent;
    ...
}

The select already has an explicit background otherwise.

[dakahn]

still seeing this on Windows in Chrome latest

[brunnerh]

For me the problem is no longer there both with the Svelte components (which uses carbon-components 10.40.0) and on the website, which shows:

Vanilla Components version ^10.40.0
React Components version ^7.40.0

🤔