The purpose of the Open UI group is to provide the web platform with UI controls that can be styled and extended by web developers. The <selectmenu> element is one of the early browser implementations of the Open UI select specification.
<selectmenu> is available in Chromium-based browsers and requires a Canary version as well as the Experimental Web Platform features flag to be enabled in about:flags.
The demos below show how the <selectmenu> UI control can be used to achieve what was once only possible with custom selects.
The control is still in its early days and these demos have been made to find bugs with the implementation and limitations in the architecture. They are not complete and have bugs.
Also note that some of the demos are not fully accessible. The experimental <selectmenu> control allows to go very far in extending its default behavior. Some of the demos extend and even replace the entire shadow DOM of the control in order to push the prototype to its limits. As a result some demos are inaccessible. These are currently serving as a way to provoke discussions aimed at evolving the specification and implementation.
Create a rounded listbox, with inline options that are constrained within the circle
Note: Make sure there is enough room below the button to expand the listbox since the CSS code doesn't handle cases when it is above the button.
Vertically aligned options
Vertically align the popup so the selected option's vertical position matches that of the selected-value.
Note: this only works when the popup would normally appear below the button. The logic fails when the browser auto-places the popup above the button.
Add a input field to the popup that can be used to filter the options.
Allow selecting multiple options from the list, displaying them in the button.
Display more text within options, use a custom toggle button, and display an icon next to some options.
Limit the max-height of the popup and provide scrolling.