A select should tell you something

Heads up: your browser doesn’t support customizable selects yet, so the “after” demos below look like ordinary selects. That’s also exactly what your visitors would see in this browser. To see the difference, open this page in Chrome or Edge. There are multiple articles about appearance: base-select and how you can use it. We finally can style a select. The bigger change is what an option can hold. Until now, an option was one line of plain text, so everything a person needed to decide had to fit in a label or be left out. Now an option can carry the thing people actually decide with: a preview, a number, a job title, a warning. They stop reading and working things out, and start recognising. Below are five selects, each shown before and after. The before is what most forms do today. The after is the same <select>, with the same keyboard behaviour and the same form value. Only what it shows has changed. If you want the mechanics, the Chrome team’s announcement and MDN’s guide cover…