[Dropdown] Inconsistent appearance

[hohaicongthuan]

The visual appearance of the dropdown varies a lot across different OSes and browsers. Here are some examples:

OS | Browser	Image	OS | Browser	Image
Windows 7's dropdown		Windows 11 | Brave
Windows 10 | Brave		Linux (Kubuntu) | Brave
Windows 10 | Edge		Windows 10 | Firefox

(There's more but you get the idea)

[khang-nd]

This is due to the fact that the dropdown component is merely styling the browser's default select element. To achieve a consistent cross-browser dropdown box, we'd probably need to make a pseudo dropdown element and utilize some sort of CSS combinators (e.g. > or +). Also, I reckon it would still be useful to keep the select element support for simplicity or as a fallback behavior.

[wll8]

https://github.com/necolas/normalize.css

Will the problem be alleviated if normalize is used?

[khang-nd]

@wll8 Unlikely, the main concern is the dropdown box's appearance e.g the borders, shape, shadow, background color... being not consistent, and normalize.css only helps standardize the fonts (line 163-168) and doesn't touch any of the aforementioned properties.

With my limited CSS knowledge, I don't think there's an easy way to address these properties of a native select element, best I might do is as I commented above.

[liam-mills]

Hi @khang-nd,

Just wanted to make you aware of the selectlist (previously selectmenu) proposal by Open UI. As it's still in a proposal state it isn't supported on any browsers currently (with the exception of Chrome under an experimental flag). But if this proposal becomes standard then we could aim to style the dropdown menu accordingly with the Windows 7 format; fingers crossed.

For your reading:

https://open-ui.org/components/selectlist/
https://caniuse.com/?search=selectlist
https://css-tricks.com/the-selectmenu-element/

Cheers.