Jan 28, 2022

CSS selectmenu

As of 28-01-2022, this feature is only available as an Experimental Web Platform feature in Chrome. This feature can be enabled in your Chrome browser here: chrome://flags/#experimental-web-platform-features.

You use selectmenu just like you would use select:

<selectmenu class="logos">
 <option value="edge" selected>Edge</option>
 <option value="chrome">Chrome</option>
 <option value="firefox">Firefox</option>
 <option value="brave">Brave</option>
 <option value="safari">Safari</option>
 <option value="opera">Opera</option>
</selectmenu>

Styling selectmenu

With the selectmenu element you have the ability to style every element of the select menu, using a variety of new CSS selectors such as:

selectmenu: selectmenu {}
button: selectmenu::part(button) {}
selected-value: selectmenu::part(selected-value) {}
listbox: selectmenu::part(listbox) {}
optgroup: selectmenu optgroup {}
option: selectmenu option {}

selectmenu

selectmenu {
 border: 2px dashed red;
}

selectmenu::part(button)

selectmenu::part(button) {
 border: 2px dashed red;
}

selectmenu::part(selected-value)

selectmenu::part(selected-value) {
 border: 2px dashed red;
}

selectmenu::part(listbox)

selectmenu::part(listbox) {
 border: 2px dashed red;
}

selectmenu optgroup

selectmenu optgroup {
 border: 2px dashed red;
}

selectmenu option

selectmenu option {
 border: 2px dashed red;
}