The story 31 October 2026
The Dropdown Menu, the Last Plain Box on the Page, Can Now Be Designed
For thirty years the menu that drops down when you pick a size, a country or a colour has looked the way the visitor’s computer drew it, whatever the rest of the page looked like. Chrome let designers restyle it last year. Safari followed in September, and on Monday Safari 27.2 added one more piece.
As the visitor’s computer draws it: words only, in the system’s own font
Restyled: the page’s own type, a colour swatch in each choice
Almost every page that sells something has one: the box you click to choose a size, a country, a delivery day, and the short list that drops out of it. In the trade it is called a select, after the piece of HTML that makes it. Until recently a designer could change little about it beyond the border and the colour of the text. The list that opened was drawn by the visitor’s operating system, in its own font and its own highlight colour, and it could hold only words. Sites that wanted a menu to match the rest of the page built a fake one out of a script and plain boxes, and fake ones often fail people who use a keyboard or a screen reader.
That has changed in two of the three big browsers. Chrome made the menu restylable in version 135, in spring 2025. Safari 27.0 did the same on 17 September. A designer switches it on with one line of CSS, the language that sets how a page looks: appearance: base-select. After that every part can be styled: the box, the list, the little arrow, the tick beside the chosen item. Each choice can now hold more than words, so a paint shop can show a swatch beside each colour and a travel site a flag beside each country. Because it is still the real menu, it keeps working with the keyboard, with screen readers and with forms. Safari’s team put the aim plainly: “a fully custom drop-down menu to match the look and feel of your website”.
Read the full storyClose
The starting look matters too. Switch the new menu on and add nothing, and Safari now draws it with a soft drop shadow, corners rounded by four pixels, rows tall enough for a fingertip, a down-pointing arrow and a tick, in light and dark versions. Safari changed these defaults over the summer and took the design to the CSS Working Group, the body that writes the rules browsers follow, so that every browser can share one starting point.
Safari 27.2, released on Monday, adds a small hook called ::field-content. It lets a designer style the words of the chosen option where they sit in the closed box, without rebuilding the box. The same release keeps a long list from spilling off the edge of the screen.
There is a trade. Chrome’s own announcement lists what the restyled menu gives up: it no longer opens the phone’s built-in picker, and it no longer stretches to fit its longest choice. Firefox has the new menu only behind a hidden setting, so its visitors still see the old one. Nothing breaks for them: a browser that does not know the new line ignores it and draws the ordinary menu.
Why it mattersForms are where a carefully designed page most often turns back into a default one, at the moment someone is choosing what to buy. The menu can now carry the page’s type, colour and pictures. Make the plain version look finished, since Firefox visitors will see it, then restyle the new one, and test it on a phone, where the restyled menu replaces the built-in picker.
Craft: colour, structure and motion in award-winning websites →
Sources: WebKit: Features for Safari 27.2 (26 October 2026) · WebKit: Features for Safari 27.0 (17 September 2026) · Chrome for Developers: The select element can now be customized with CSS (24 March 2025) · MDN: Customizable select elements · MDN browser compatibility data: appearance