The Goldilocks customizable select height
Jake Archibald explores the ideal height for customizable select elements on the web, balancing usability, aesthetics, and compatibility across platforms. The article examines different approaches and recommends a height range that works well in most contexts without being too short or too tall.
Background
Jake Archibald is a well-known web developer and engineer at Google who works on browser standards. This post discusses a proposal for a new CSS property — `select-height` — that would let developers control the height of the native `<select>` dropdown on the web. Currently, dropdown menus are either "short" (matching the number of visible options) or "long" (a fixed, often arbitrary height set by the browser), with no middle ground. The "Goldilocks" idea is a third option: a developer-chosen height that is neither too small nor too large. This matters because `<select>` is one of the last major form elements that remains hard to style consistently across browsers without resorting to custom JavaScript solutions, which often break accessibility or platform conventions. The proposal is still early and being discussed in the Open UI community group, which feeds into browser vendors like Chrome, Safari, and Firefox.