Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

designVercel

Give Native Selects Explicit Colors

MUST

MUST: Set BOTH `background-color` and `color` on every native `<select>` from your tokens (and pair them with `color-scheme` so the option popup follows) — form controls do not inherit them, so styling only the text leaves near-white on the platform's white Field background in Windows dark mode.

Set both background-color and color on every native <select>, never just one

Bad

Good

Why it matters

Form controls do not inherit `color` and `background-color` the way ordinary elements do — the browser supplies its own. Style only the text for your dark theme and the platform keeps its light Field background underneath, giving you near-white text on white: the value and every option in the popup become unreadable. This bites hardest on Windows, where the UA background is least likely to follow your theme. Declare both properties from your tokens, and pair them with `color-scheme` so the native option list is drawn dark too.

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.