More on the topic...
Generating detailed summary...
Failed to generate summary. Please try again.
Safari 27 will let you style native <select> controls completely—custom arrows, color swatches, icons and full CSS—without losing built-in keyboard and accessibility support. The catch: every <option> still needs real text (or an accessible attribute like aria-label). Skip that and you break usability, screen readers, and fallbacks in older browsers.
Imagine a photo site with a category dropdown showing only icons—a building, a flower, a hummingbird. It looks sleek until you realize there’s no way to know which icon is selected, or what each one means. Add a hidden text label or aria-label and the menu becomes instantly clear. Screen readers announce “Wildlife” instead of silence, braille displays get actual words, and sighted users scanning the list get meaning at a glance.
On browsers without support for customizable select, or when CSS fails to load, your enhanced control falls back to the default select. If your options lack text, that fallback is a list of blanks. The article recommends wrapping styles in an @supports(appearance: base-select) block, building your UI around plain text first, and layering icons or swatches on top without replacing any words.
In short: never ditch text. Hide it visually if you must. Keep it tiny or off-screen. But make sure every option carries real content. That single rule prevents broken menus, preserves accessibility, and ensures a smooth upgrade path across all browsers.
Questions about this article
No questions yet.