← Back to release summary

Customizable <select> Element

Category
DOM
Type
New or changed feature
Status
Enabled by default (Chrome 134)
Intent stage
Start prototyping

Summary

Customizable <select> allows developers to take complete control of the rendering of <select> elements by adding the appearance:base-select CSS property. This feature relies on the SelectParserRelaxation flag, which changes the HTML parser to allow more tags within the <select> tag. Sites which include additional tags inside <select> which were getting removed before, such as <span>s, or are including an extremely large number of <option>s in their <select>, may be affected by SelectParserRelaxation. This feature and SelectParserRelaxation can be controlled with the SelectParserRelaxation enterprise policy. Some issues that have come up in prior launches of SelectParserRelaxation include <select>s taking a very long time to open or <option>s not showing up anymore.

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.

Standards & signals

Docs: https://open-ui.org/components/select

Explainers: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ControlUICustomization/explainer.md https://open-ui.org/components/select

View on chromestatus.com