Arnold Gunter

Follow

4 min read

·

1 day ago

--

1

Share

Not a paying member? Read it here for free.

Hello, fellow web dev

If you’ve ever built a <select> element in HTML, you know the pain: only plain, lifeless text shows up.

It’s a UI crime, honestly.

Not only does it look awful, but the user experience suffers as well.

All you see is plain text and with icons or extra styling, users could scan options faster — but that’s not possible.

And exactly this functionality is what developers have been asking for for decades.

Boom, it’s finally here.

We can customize our <select>!

So let's have a look

• How it works
• How to style it
• Real world examples
• Browser support

Love this type of content?

Join 250+ of web developers leveling up their skills with my weekly newsletter — and get your free CSS Selector Cheat Sheet to boost your coding skills! —

How It Was Before

If you wanted a rich dropdown — icons, HTML, maybe even interactive content — you needed to fake the dropdown using a…