Dropdown menu doesn't render correctly

[pluma]

Reference screenshot found online:

Current dropdown in latest Edge Dev (Chromium):

Also the hover state doesn't seem right.

EDIT: This may be a limitation of using a native select component.

[danopia]

Definitely letting the OS render the dropdowns..

Probably intentional for accessibility purposes tbh

[damianmr]

I think it won't be possible to fix this in pure CSS.

A possible workaround is to use 98.css in a browser running on Windows 98 🙃

[padraigfl]

Definitely don't get into the headache of figuring out the select components tbh, even with JavaScript it's a huge pain (didn't the guy who begun react-select do a talk specifically about how it was a huge ordeal he'd've never considered starting if he had known in advance) and will make people using it on mobile really hard

[jdan]

Yep, you're right, I'm using the native one!

Some other limitations of my approach:

• I can't put a blue background on just the selected text, I have to make the entire background blue 😱
• I can't detect :active on just the arrow, so it'll have a pressed appearance when you click anywhere on the select.

As mentioned above I am not sure how to solve this in pure CSS! I would be game to introduce a more complex select built with buttons and aria-expanded, to be driven by the user's JS framework of choice.

[CaptainFalcon92]

Hello there.

I confirm that you cannot fully control select element styling in css3.
So far browsers do not allow for much styling of select options and it is OS specific.
In order to fully customize a dropdown styling, it would require a custom element and js like many library do.

Here is an example of "artificial" select using some library called "custom select"

So unless 98.css is willing to endorse a specific JS "team" (native/react/vue/angular...) i think this is up to the developer to do this.
98.css could however brings some tools in order to help with creating fully-customized dropdowns.

Inputs and scrollbars already exists, maybe we could create an actual dropdown component that is not a select tag. This can be seen for example with bootstrap dropdowns

Despite the look, these are actually css controlled by one .open class toggled by some js.

In any case, this is not possible to get the exact styling of select options at the moment 🙂

[danwdart]

What about with ::after and ::before hacks?

[piranna]

What about with ::after and ::before hacks?

I was going to propose just that, select in Windows are in fact a combination of textbox and a button...