Pagination popups may need explicit background

[brunnerh]

Without hover the <select> has no background, leading to this for the dark themes on Chrome:

It works on Firefox but i do not know where that color is from:

The <Select> component always has a default background which prevents the problem altogether:

.bx--select-input {
    ...
    background-color: var(--cds-field,#f4f4f4);
    ...
}

[metonym]

What OS and Chrome version are you using?

This is what I see on MacOS and Chrome 91:

[brunnerh]

@metonym
Windows 10 (version 20H2, build 19042.1052).
I guess this is a Windows-specific issue then, as those MacOS dropdowns look quite different.

[metonym]

Interesting. Pagination uses Select, which uses the native select HTML element. That would explain the visual differences between browsers/operating systems.

[brunnerh]

(It is always good to use the native <select> if possible, though, due its high level of accessibility.)

[brunnerh]

Did not see the actual cause at first: For inline select components the background is explicitly set to transparent, otherwise it would be fine due to the default background from the .bx--select-input class:

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

[metonym]

Good eye. It might be worth raising this issue in the Carbon repo

[brunnerh]

Recorded as carbon-design-system/carbon#9112