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 them well. See it, don’t imagine it A font picker usually lists names. To choose well, you either already know what Fraunces looks like, or you pick it, look at the result, and come back to try the next one. When each option is set in its own typeface, the option is the preview. You judge the shape, not the name. Before Heading font After Heading font Gentium Book Basic, Serif Fraunces, Serif Literata, Serif Space Grotesk, Sans IBM Plex Mono, Mono Playfair Display, Display Caveat, Handwriting Before, you need to know what Fraunces looks like. After, you see it. This pattern is not new. We already have in document editors (like Google Docs) and in design tools (like Figma and Photoshop). It just became available for us and all we need is one inline style per option, style="font-family: 'Fraunces', serif", and the closed control keeps the typeface after you choose. We are also able to show the category of each font, like Serif, Sans, Mono, Display, or Handwriting. Let the list do the maths Time zone pickers tend to look like “(GMT+09:00) Tokyo”. The offset is accurate and almost never what you want. What you want is the time there, so you add the offset to your own time in your head, and maybe get it wrong around midnight. Show the current time next to each city, plus whether it’s day or night, and the question answers itself before you choose. Before Schedule in After Schedule in , Before, you work out the time from the offset. After, the list tells you, and …