The selectmenu Element Is No More…Long Live select!
An earlier piece here introduced <selectmenu>, a proposed, more style-able alternative to the native <select> element. But following the trail of links from that article leads to a dead end: the Open UI explainer now redirects, and it turns out the <selectmenu> proposal has been abandoned.
According to posts from Jared White and Una at the Chrome Developer Blog, the new direction is a “customizable select.” Rather than shipping a brand-new element, the plan is to extend the existing native <select> with additional CSS capabilities for targeting its internal parts. Adam Argyle has already put together a demo with a boilerplate showcasing the approach.
At the heart of the new styling mechanism is a ::picker(select) pseudo-element. Further parts can be selected with additional elements and pseudo-classes:
<selectedoption>— the currently selected option<option>— now accepts HTML content between its tags, and supports:option::beforeoption:checked— though there’s some confusion about how this relates to the selected option
<button>— the chevron arrow marker
One benefit of this approach: if a browser doesn’t support the new selectors, users still get the default <select> behavior, as demonstrated in one of Una’s demos. The full details are being tracked on Open UI’s new page for the Customizable <select>.
