CSS selectmenu

28-01-2022

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;
}