Skip to content

Inline Select component needs background in Chrome/Windows #9112

@brunnerh

Description

@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):
image

Without hover:
image

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions