WebCraft

Home / Elements / form

appearance: base-select

A select you can finally style

CaveatIt is opt-in twice over: the property has to be set on the select and again on ::picker(select), and the element needs an in-page <button> wrapping <selectedcontent> for the closed state. Once you are in the base appearance you own everything the platform used to hand you, including the tick, the hover state and the hit area.

FallbackA browser that does not know the value ignores it and the pseudo-elements alongside it, and its parser drops the <button> it does not expect inside a select, so what ships is the ordinary native control with the handful of styles that were always allowed. Write those first and let the base appearance be the upgrade.

HTML + CSS 
<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option>Draft</option>
</select>

/* both, or the list keeps the native look */
select, select::picker(select) {
  appearance: base-select;
}

Published

Questions

<details name>

How do I style a select dropdown list in CSS?

Set appearance: base-select on the select and on ::picker(select), then style the options as ordinary elements. Before that value existed the drop-down list was drawn by the operating system and only the closed control could be styled at all.

How do I change the arrow on a select?

In the base appearance the arrow is the ::picker-icon pseudo-element, so it takes color, rotate and a transition like anything else. The old workaround was to hide the native arrow with appearance: none and paint a background image in its place.

What happens in a browser that does not support appearance: base-select?

It ignores the property and the pseudo-elements, and its HTML parser drops the <button> it does not expect inside a select, so the native control renders with the options as usual. Style the closed control first and treat the rest as an enhancement.

Also tagged form