Customisable Single Select

[lukewarlow]

Description

This covers updating the parsing for the select element to match the changes to the HTML spec, as well as styling changes from appearance: base-select which enables rich content and highly customisable styling for the select input.

This proposal covers the single select in drop-down mode, which is what has shipped to stable Chromium.

Multi-select and listbox select is explicitly out of scope from this proposal as it's not finished standardisation (though it would be great to work towards).

Specification

https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2

web-feature

web-features: customizable-select

Test Links

No response

Additional Signals

Mozilla Standards Position: Positive

WebKit Standards Position: Unknown

I don't have surveys to hand but this has consistently come up as big ask from web developers.

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.

Feature Customizable <select>

• ID: customizable-select
• Name: Customizable <select>
• Description: The <select> element's appearance, including the button, selected option, picker dropdown, and options, can be customized using CSS.
• Baseline status: Limited Availability
• Docs: Customizable select elements
• Standard positions: Mozilla, WebKit
• Chrome use counter: chromestatus.com
• State of CSS/JS/HTML surveys: State of HTML 2024 (reading_list question), State of HTML 2024 (forms question), State of HTML 2024 (features question)
• More information: See the web-features explorer

[foolip]

@lukewarlow do you know what the right set of tests for this would be? I found these directories:

https://wpt.fyi/results/html/rendering/replaced-elements/the-select-element/customizable-select
https://wpt.fyi/results/html/semantics/forms/the-select-element/customizable-select
https://wpt.fyi/results/html/semantics/forms/the-select-element/customizable-select-in-page
https://wpt.fyi/results/html/semantics/forms/the-select-element/customizable-select-multiple-popup

@mfreed7 perhaps you can help explain the scope of the -in-page and -multiple-popup directories?

[lukewarlow]

Multiple and in-page aren't in scope for this request as neither are standardised yet. As for the full suite of tests there's some parser ones in html5lib somewhere and an assortment in wpt but I don't know the full set.

[mfreed7]

Multiple and in-page aren't in scope for this request as neither are standardised yet.

+1 - those are still tentative and in progress, and shouldn't be included here.

As for the full suite of tests there's some parser ones in html5lib somewhere and an assortment in wpt but I don't know the full set.

+@josepharhar for the authoritative answer.

[josepharhar]

The html5lib tests haven't been merged yet: html5lib/html5lib-tests#178

The customizable-select directory should have everything for customizable select. I also just removed tentative from the tests in there which should be used.

[lukewarlow]

The parser tests will be available once web-platform-tests/wpt#54888 is merged.