v145 · CSS · Forms · demo

Color Picker Select

A brand color picker built as a <select size="N"> with appearance: base-select. Each option contains a colour swatch and a name — rendered as rich HTML, not plain text. Selecting a color updates a live preview card. This is impossible with traditional <select> without JavaScript hacks.

Chrome 145+ — appearance: base-select with custom option HTML. In older browsers the select falls back to the native OS listbox with plain text labels — the preview card still updates but the swatches are invisible.

Click a brand color in the listbox · the preview card updates with that color · the tag and button adopt it too

Choose brand color

Node Green — #3c873a

Live preview

Component Library

v2.4.0 stable

/* Customizable select listbox — Chrome 145 */
/* appearance: base-select opts in to CSS-styleable select */

select {
  appearance: base-select;  /* unlocks full CSS styling */
  border: 2px solid #111;
  font-family: monospace;
}

option {
  display: flex;          /* now supports flexbox! */
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}

/* Option content can include rich HTML: */
/* <option><span class="swatch"></span>Label</option> */

/* Previously: you'd need a custom listbox component,
   MutationObserver to sync values, keyboard nav from scratch, etc. */

see also