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 <selectlist> element is one of the early browser implementations of the Open UI selectlist specification.
<selectlist> 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 <selectlist> 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 <selectlist> 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.
Rounded select
Create a rounded listbox, with inline options that are constrained within the circle.
Note: The CSS code for this demo adds a couple of pseudo-elements to draw a curve between the button and the listbox. To make this work in cases where there isn't enough room below the button to fit the listbox, some JavaScript code is used to position the pseudo-elements correctly. Also, these elements are hidden as soon as you start scrolling around.
Vertically aligned options
Vertically align the popover so the selected option's vertical position matches that of the selected-value.
Note: this only works when the popover would normally appear below the button. The logic fails when the browser auto-places the popover above the button.
Combobox
Add a input field to the popover that can be used to filter the options.
Note: the button and popover have different styles whether the popover is visible or not, and whether it's above the button.
Multi-select
Allow selecting multiple options from the list, displaying them in the button.
Account switcher
Display more text within options, use a custom toggle button, and display an icon next to some options.
Scroll indicators
Limit the max-height of the popover and provide scrolling.