We just covered The Current State of Styling Selects in 2019, but we didn’t get nearly as far and fancy as Julie Grundy gets here. There is a decent chunk of JavaScript that powers it, so I’m still very much eyeballing browsers’ recent interest in giving us more powerful selects in (presumably) just HTML and CSS.
I tossed a fork on CodePen in case you just wanna see the final result.
See the Pen
Custom Select Input by Chris Coyier (@chriscoyier)
on CodePen.
This is also the first article in the 2019 edition of 24 Ways, the long-running and wonderful annual advent calendar for developers that is worth reading every single year.
This is brilliant. One thing I’m always concerned about when re-creating custom form elements is the impact on accessibility, but this actually seems to fare very well. The element type is properly constructed in the accessibility tree (I tested latest version of Fx), and announced as expected by screen readers (NVDA, which is currently the most popular SR in use). Even the filtered combo list beneath as you type is updated and correctly read out, with the correct number of elements. It might be worth testing that feature on a Mac with VoiceOver, as it’s my experience that that SR sometimes gets confused with custom elements and announcing the right content at the right time, but I don’t have one available right now to test.