demo · v134
Picker Anatomy
A live editor for the new pseudo-elements: ::picker(select), ::picker-icon, the option list, and the selectedcontent button. Drag the sliders, the dropdown rebuilds, and a generated stylesheet ships out.
trigger
2
0
picker pop-up
2
8
try opening the picker (click or focus + space). Configure left, copy below.
which pseudo-element does what
select { appearance: base-select; }— opts the trigger into being styleable as a real element instead of a black-box widget.::picker(select)— the floating menu container. Width, border, shadow, background.::picker-icon— the chevron / arrow on the trigger; can be replaced with any glyph.::checkmark— the selected-item indicator inside the picker; not used here but available for custom marks.<selectedcontent>inside<button>— what the closed trigger displays, kept in sync with the selected option.