Open UI's <selectmenu> demos

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.

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 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.

Combobox

Add a input field to the popup that can be used to filter the options.

Note: the button and popup have different styles whether the popup is visible or not, and whether it's above the button. Some custom JavaScript code is used to detect this using the show/hide popup events.

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 popup and provide scrolling.

    โ–ฒ
    โ–ผ

    GitHub's issue filter

    Display icons for some options, support inline and list layouts within the same select, display groups of options.

    Note: optgroup's labels are not stylable yet, so the groups are done with divs.

    Sort by
    Most reactions

    Dribbble's filter

    Custom toggle button with animation, icons for options.

    Word's color select

    Mix a grid of colors and a list of action items. Display a split button (click the A to set the color, click the arrow to open the drop-down).

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.