v134 · forms

Themed Select

Four visual themes — Editorial, Pill, Terminal, Pastel — each driven by CSS custom property tokens. Switching the theme updates --sel-bg, --sel-border, --sel-radius, and four others on :root. Every customizable <select> on the page responds instantly.

Feature detection: checking…
Time zone
Language
Display density
Export format
Active theme tokens
/* One set of tokens drives all select variants */
:root {
  --sel-bg: var(--bg-ivory);
  --sel-fg: var(--text-black);
  --sel-border: var(--border-black);
  --sel-border-w: 2px;
  --sel-radius: 0;
  --sel-opt-check: var(--accent-blue);
}

/* Select consumes the tokens */
select {
  appearance: base-select;
  background: var(--sel-bg);
  color: var(--sel-fg);
  border: var(--sel-border-w) solid var(--sel-border);
  border-radius: var(--sel-radius);
}
select::picker(select) {
  background: var(--sel-bg);
  border: var(--sel-border-w) solid var(--sel-border);
}
option:checked { background: var(--sel-opt-check); }

/* Theme override — one block changes everything */
[data-theme="terminal"] {
  --sel-bg: #0a0a14;
  --sel-fg: #a0f0a0;
  --sel-border: #204020;
  --sel-opt-check: #204020;
}

see also