Define base appearance for select multiple drop-down by josepharhar · Pull Request #12069 · whatwg/html

josepharhar · 2026-01-09T01:58:01Z

This PR allows drop-down select elements with the multiple attribute to have base appearance. It is very similar to base appearance for single-select drop-down select elements.

I also added missing steps to deselect other selected options for single-selects when the user picks an option.

Fixes #12049

At least two implementers are interested (and none opposed):
- Chromium
- Gecko
- Standards positions:
  - Base appearance for select multiple drop-down WebKit/standards-positions#609
  - Base appearance for select multiple drop-down mozilla/standards-positions#1349
Tests are written and can be reviewed and commented upon at:
- https://wpt.fyi/results/html/semantics/forms/the-select-element/customizable-select-multiple-popup
Implementation bugs are filed:
- Chromium: https://issues.chromium.org/issues/357649033
- Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=2032593
- WebKit: https://bugs.webkit.org/show_bug.cgi?id=312504
Corresponding HTML AAM & ARIA in HTML issues & PRs: Update definition of drop-down vs listbox rendering w3c/aria#2771
MDN issue is filed: Customizable select multiple dropdown mdn/content#43823
The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

/form-elements.html ( diff )
/rendering.html ( diff )

Fixes whatwg#12049

josepharhar · 2026-01-09T01:59:24Z

This needs additional changes to explain that <select multiple size=1> can be either a listbox or a drop-down box in appearance:auto, but is always a drop-down box for appearance:base. I can make those edits in this PR after #11460 is merged.

css-meeting-bot · 2026-02-19T16:37:02Z

The CSS Working Group just discussed Define base appearance for select multiple drop-down.

The full IRC log of that discussion

<lwarlow> https://github.com/openui/open-ui/issues/1355

josepharhar · 2026-03-16T18:16:35Z

I have made the changes I mentioned in my last comment regarding changing the drop-down box definition. This is ready for review.

zcorpan · 2026-04-02T12:10:00Z

+    <p>If <var>select</var> has the <code data-x="attr-select-multiple">multiple</code>
+    attribute, then return.</p>


Is this tested?

This seems kind of tricky to test since the resulting text that is rendered is explicitly not defined. In chrome I know that when a second option becomes selected, the resulting text that gets rendered is "2 selected", and I could do a mismatch reftest against the text being "option 2", but it would technically be legal with this text for another implementation to write "option 2" here if they wanted.

What do you think? Do you think we should test that anyway, or do you have any other ideas of how to test this?

Hmm I think instead of saying return here, it should say "set select's select fallback button text to an implementation-defined text representation of the selected options, and return."

I guess you're correct that it's not testable if it's conforming to show one of the selected option's text.

Done, thanks!

Checking that clicking an option in a customizable single-select changes select.value is probably good enough, but since it was questioned whether this is tested or not, I want to add detailed test coverage which proves that the other option is deselected. Context: whatwg/html#12069 (comment) Change-Id: Iab6b6f6e7dfc3fabe8623083531ee15f372681ae

Checking that clicking an option in a customizable single-select changes select.value is probably good enough, but since it was questioned whether this is tested or not, I want to add detailed test coverage which proves that the other option is deselected. Context: whatwg/html#12069 (comment) Change-Id: Iab6b6f6e7dfc3fabe8623083531ee15f372681ae Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7726423 Reviewed-by: Joey Arhar <jarhar@chromium.org> Commit-Queue: David Grogan <dgrogan@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Auto-Submit: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1609971}

annevk · 2026-04-16T13:35:57Z

How does this not have AAM implications? This also impacts the interaction model, no?

josepharhar · 2026-04-16T19:42:34Z

I am updating a11y mappings for the prior listbox vs dropdown box change here: w3c/html-aria#555

Is that missing anything included in this PR?

zcorpan · 2026-04-16T22:06:38Z

html-aria is for authoring requirements, html-aam is for UA requirements. I think this needs changes in https://w3c.github.io/html-aam/#el-select-listbox and the next section.

anne's comment is not yet addressed.

…option elements, a=testonly Automatic update from web-platform-tests Add test coverage for deselecting other option elements Checking that clicking an option in a customizable single-select changes select.value is probably good enough, but since it was questioned whether this is tested or not, I want to add detailed test coverage which proves that the other option is deselected. Context: whatwg/html#12069 (comment) Change-Id: Iab6b6f6e7dfc3fabe8623083531ee15f372681ae Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7726423 Reviewed-by: Joey Arhar <jarhar@chromium.org> Commit-Queue: David Grogan <dgrogan@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Auto-Submit: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1609971} -- wpt-commits: ca9ae4817411eb7560f285baf783a82315137aba wpt-pr: 58981

josepharhar · 2026-04-20T23:23:41Z

Thanks, here is an html-aam PR: w3c/aria#2771

I put it in the OP

josepharhar · 2026-06-02T22:01:47Z

All of the checkboxes in the OP are checked. Is there anything else I can do to get this merged?

domfarolino

This LGTM with two small nits. Since this PR has been ready for a little while and has a completed OP and full browser support, I will land this sometime tomrrow.

annevk · 2026-06-04T06:24:39Z

+   <li>
+    <p>If <var>select</var> has the <code data-x="attr-select-multiple">multiple</code>
+    attribute, then set <var>select</var>'s <span>select fallback button text</span> to an
+    implementation-defined text representation of the selected options, and return.</p>


I think we should only do this when the button element is not used as per the issue for customizable select v1.

Do you mean that we should not set the fallback text in the case that the developer has provided their own <button> inside the <select>? I'm not sure it matters in that case, right, since this is <slot> fallback content and won't be displayed in that case anyway. Perhaps I'm misunderstanding the question though.

I guess it depends on how we define this for the native appearance. My prototype puts the button element contents here and does not slot the button element in that case.

Yeah I guess that maybe this step isn't great because the "select fallback button text" is only defined to exist as something that is used for base appearance. If I got rid of it, would that address your concern? If not, what exactly should we do instead?

If we only do this when the author doesn't provide a button element, that seems like something that would lead to invalidation issues later when adding or removing a button element. This content will be shown or hidden as expected based on the slotting of the author provided button element.

I guess it depends on how we define this for the native appearance. My prototype puts the button element contents here and does not slot the button element in that case.

For native appearance, we aren't actually defining the structure of the shadow root are we?

No, but we should define the "button text" or "button".

So we should either add a condition that the select fallback button text is not changed here if there is not an author provided button element, or add a definition for "button text" or "button" for appearance:auto? Adding the condition sounds like an easier change.

I can see how defining the text used in the button for appearance:auto dropdown select is useful for #12474 but I'm still not sure that means we should change anything here.

Define base appearance for select multiple drop-down

8b2770a

Fixes whatwg#12049

josepharhar mentioned this pull request Jan 9, 2026

Base appearance for drop-down select multiple #12049

Open

saschanaz mentioned this pull request Jan 9, 2026

Use the value attribute for color update if dirty value flag is false #12065

Merged

6 tasks

lukewarlow mentioned this pull request Jan 27, 2026

[css-forms-1] Should appearance: base-select work on listbox selects? (<select size>/<select multiple>) w3c/csswg-drafts#12468

Closed

This was referenced Feb 3, 2026

Base appearance for select multiple drop-down WebKit/standards-positions#609

Open

Base appearance for select multiple drop-down mozilla/standards-positions#1349

Closed

josepharhar added the agenda+ To be discussed at a triage meeting label Feb 3, 2026

cwilso removed the agenda+ To be discussed at a triage meeting label Feb 6, 2026

cwilso mentioned this pull request Feb 6, 2026

Upcoming WHATNOT meeting on 02-05-2026 #12134

Closed

josepharhar added the agenda+ To be discussed at a triage meeting label Feb 10, 2026

josepharhar mentioned this pull request Feb 18, 2026

Meeting 36 for joint OpenUI-WHATWG/HTML-CSSWG task force on styleable form controls #12139

Closed

josepharhar added 3 commits March 16, 2026 10:35

Merge branch 'main' into baseselectmultiplepopup

401441c

Merge branch 'main' into baseselectmultiplepopup

a3b356e

reset selectedness and update drop-down definition

cd7ba0b

zcorpan reviewed Apr 2, 2026

View reviewed changes

chromium-wpt-export-bot mentioned this pull request Apr 3, 2026

Add test coverage for deselecting other option elements web-platform-tests/wpt#58981

Merged

use implementation defined in algorithm

43de2d6

zcorpan previously approved these changes Apr 16, 2026

View reviewed changes

josepharhar mentioned this pull request Apr 16, 2026

Customizable select multiple dropdown mdn/content#43823

Open

josepharhar removed the agenda+ To be discussed at a triage meeting label Apr 30, 2026

josepharhar closed this Jun 2, 2026

josepharhar reopened this Jun 2, 2026

sb3nder mentioned this pull request Jun 2, 2026

change of the condition under which select element must have placeholder label option #12246

Open

domfarolino approved these changes Jun 4, 2026

View reviewed changes

Comment thread source Outdated

Comment thread source Outdated

Comment thread source

annevk reviewed Jun 4, 2026

View reviewed changes

zcorpan reviewed Jun 4, 2026

View reviewed changes

Comment thread source Outdated

Comment thread source Outdated

Comment thread source Outdated

Comment thread source Outdated

domfarolino added 3 commits June 4, 2026 12:24

Address some things

9066fac

Delete redundant paragraph

7f325d2

Removed extra bug fix

2e9dd32

		<p>If <var>select</var> has the <code data-x="attr-select-multiple">multiple</code>
		attribute, then return.</p>

Conversation

josepharhar commented Jan 9, 2026 • edited by pr-preview Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

josepharhar commented Jan 9, 2026

Uh oh!

css-meeting-bot commented Feb 19, 2026

Uh oh!

josepharhar commented Mar 16, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

annevk commented Apr 16, 2026

Uh oh!

josepharhar commented Apr 16, 2026

Uh oh!

zcorpan commented Apr 16, 2026

Uh oh!

josepharhar commented Apr 20, 2026

Uh oh!

josepharhar commented Jun 2, 2026

Uh oh!

domfarolino left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

josepharhar Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

7 participants

josepharhar commented Jan 9, 2026 •

edited by pr-preview Bot

Loading

josepharhar Jun 8, 2026 •

edited

Loading