Customizable <select> Element

Adds a customizable select HTMLElement, with the working name of <selectmenu>. The element will offer authors full control over its appearance without requiring them to rewrite the model and controller logic underpinning its function.

Motivation

A common frustration for developers who try to work with the browser's built-in form controls, particularly <select>, is that they cannot customize the appearance of these controls to fit their site's design or user experience. Since the browser platform has limited ability for customization of <select>, developers often end up rolling their own implementations. When developers reimplement form controls from scratch, they're not able to leverage the work done on the Web Platform to optimize performance, reliability, and accessibility of the native controls. Providing a fully customizable <select> allows web developers to change it fit their site while leaning on investments in the web platform, saving time for developers and improving experience of the end users who interact with the controls. Note: The explainer document (https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ControlUICustomization/explainer.md) describes a process for implementing customizability in all form controls, but at this stage the plan is to scope prototyping to only the <select> element.

Documentation

Specification

Editor's draft

Status in Chromium

Blink>Forms


Proposed (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No signal
  • Positive
  • No signal
  • Positive

Owners

Comments

This feature is still in early development, and we expect the details to change as we learn and experiment. The goal of this prototype is to validate our thinking so far, discover complications that we may have missed, and more easily allow interested parties to try it out and give feedback. The Open-UI <select> anatomy is also incomplete, lacking details for <select multiple> and <select size="n">. Our initial prototype will implement only the single-select with a button and listbox, and will evolve alongside the development and standardization of the Open-UI anatomy.

Search tags

select, custom select, controls, form controls, custom controls, custom form controls,

Last updated on 2020-10-25