←back to thread

The <select> element can now be customized with CSS

(developer.chrome.com)
507 points tosh | 5 comments | 31 Mar 25 09:11 UTC | HN request time: 0.833s | source
Show context
dpcx ◴[31 Mar 25 13:47 UTC] No.43535016[source]▶
This looks like what web developers have been waiting literally decades for. Possibly replacing (eventually) a bunch of JS libraries to make this all do what we want.

I don't have Chrome installed, but I'm curious how it handles multi-select fields, as I didn't see that in the example video.

replies(2): >>43535107 #>>43535287 #
dqv ◴[31 Mar 25 13:55 UTC] No.43535107[source]▶
I just tried it in the Codepen and it reverts to a regular old UI element when it has the multiple attribute.

Also just tried it with multiple="multiple" just in case. Same behavior.

replies(2): >>43535194 #>>43535475 #
no_wizard ◴[31 Mar 25 14:29 UTC] No.43535475[source]▶
Huge miss in my opinion. If it doesn’t support all scenarios I’m not sure what the Chrome team is thinking here
replies(3): >>43535649 #>>43535758 #>>43538897 #
1. dqv ◴[31 Mar 25 14:45 UTC] No.43535649[source]▶
I was just wondering how people do a custom <select multiple> now. I guess they make it screen-reader-only and then have aria-hidden checkboxes for everyone else.
replies(1): >>43535912 #
2. sureIy ◴[31 Mar 25 15:07 UTC] No.43535912[source]▶
"Select multiple" is just a list of checkboxes. The missing part (which is also missing from select) is just the filtering.

I am not holding my breath for a decent "select multiple" field. It's been the same crap for decades and browsers could have fixed it long again without waiting for spec - it's just a "replaced element", but they don't care.

The fun part is that it looks amazing on Safari iOS (and QED it's rendered as a list of checkboxes)

replies(2): >>43536349 #>>43537571 #
3. TimTheTinker ◴[31 Mar 25 15:45 UTC] No.43536349[source]▶
> "Select multiple" is just a list of checkboxes.

Not necessarily. I've seen more than one production app with a custom filtering dropdown list of items with checkboxes.

I built a couple variants of that in React at my last gig for the company's design system. The keyboard nav was complex... that component is one of the work artifacts that I'm most proud of.

replies(1): >>43537275 #
4. sureIy ◴[31 Mar 25 17:07 UTC] No.43537275{3}[source]▶
> custom filtering dropdown

I already said that. "Select" is not filterable in the browser already, so `select[multiple]` has no chance of seeing that in this decade.

However you slice/style it, it's just checkboxes (that you can filter/reorder)

5. mjrpes ◴[31 Mar 25 17:35 UTC] No.43537571[source]▶
I commented on this a few weeks ago. There are two future components under development that look to support selecting multiple options in a dropdown format.

Search textbox: would be supported under the more customizable Combobox element

Select Multiple: both the Enhanced Select and Combobox plan to support this

Combobox: https://open-ui.org/components/combobox.explainer/

Enhanced Select: https://open-ui.org/components/customizableselect/