A long, long time ago, I wrote a select "component" as I called it in html and css.

The idea was to create a dropdown list made of other html elements (this was before web components, React or other).

Looking back, yuk! Invalid html, weird hacks, but it sort of worked. this is because a select element is basically a radio group.

So I refactored it to use :focus-within and hey presto, it works well. I actually don't have any accessibility concerns with this one and may well put this into production after some cross browser testing (you can tell me its not broken 😇).

Edit: nope! Chrome is perfect, Firefox focus is so broken on a mac, clicks don't trigger focus so I had to use tabindex which is always a bad idea, so this is maybe not a good idea :(. To make FF half work I had to make chrome worse, and thats why accessibility is hard and why you should just use standard html elements, because parity isn't good enough - so close, I'll try in another 10 years.