demo · v133

Form picker indicators

:open covers the underrated case of native form pickers — <input type="date">, <input type="color">, <input type="file">, <select>. Style the input to reflect whether its native picker is currently open, without polling focus or click events.

date picker

color picker

file picker

select picker

click any picker. its input will recolour and the label will mark which picker is open — from CSS only.

the rule

input:open, select:open {
  background: black; color: white;
  box-shadow: 0 0 0 3px var(--accent-blue);
}
label:has(+ input:open)::before { content: "now showing picker \2192"; }

Before :open on form controls, you had no event that fires when the native picker opens. You could approximate with focus + click heuristics, but the indicator would flicker because focus can be held while the picker is closed. :open is the authoritative signal — tied directly to the picker UA's open-state machine.

see also