jdan / 98.css

A design system for building faithful recreations of old UIs
https://jdan.github.io/98.css
MIT License
9.51k stars 307 forks source link

Dropdown menu doesn't render correctly #12

Closed pluma closed 3 years ago

pluma commented 4 years ago

Reference screenshot found online:

image

Current dropdown in latest Edge Dev (Chromium):

image

Also the hover state doesn't seem right.

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

danopia commented 4 years ago

Definitely letting the OS render the dropdowns..

Screen Shot 2020-04-22 at 11 37 12 AM

Probably intentional for accessibility purposes tbh

damianmr commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

Some other limitations of my approach:

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 commented 4 years ago

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 commented 4 years ago

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

piranna commented 4 years ago

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...