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

The CSS Working Group just discussed ``[css-forms-1] Should `appearance: base-select` work on listbox selects? (`<select size>`/`<select multiple>`)``, and agreed to the following:

* `RESOLVED: appearance: base-select can be used to opt listbox selects into base appearance. control of listbox and multiple rendering will be improved in html`
* `RESOLVED: appearance: base-select can be used to opt listbox selects into base appearance. control of listbox and multiple rendering will be improved in html`

<details><summary>The full IRC log of that discussion</summary>
&lt;kbabbitt> lea: recently appearance base-select shipped in chorme for customizable select<br>
&lt;kbabbitt> ... however current impl doesn't do anything for listbox selects<br>
&lt;kbabbitt> ... and there's nothing in the spec around this<br>
&lt;kbabbitt> ... there's a picker-icon pseduo which theoretically doesn't apply<br>
&lt;kbabbitt> ... only mention of listboxes is an unrelated mention around ? pseudo classes<br>
&lt;kbabbitt> ... question is, should appearance: base-select apply to listbox select<br>
&lt;kbabbitt> ... one idea I had is that, even though we have consensus that it should, i wonder if we introduce a different value for this<br>
&lt;kbabbitt> ... we could use the css property to switch between the two modes<br>
&lt;kbabbitt> ... right now there's no css way to switch<br>
&lt;keithamus> q+<br>
&lt;kbabbitt> ... internal parts and dom are so different between the two modes, I'm not sure how it would work without such a toggle<br>
&lt;kbabbitt> ... pseudo elements are different<br>
&lt;kbabbitt> ... from an architectural point of view it was a mistake that the same element does both<br>
&lt;kbabbitt> ... and things that have nothing to do with it are used to switch between them<br>
&lt;kbabbitt> ... most modern uis implement dropdowns from scratch so they can do multi select dropdowns<br>
&lt;jarhar> q+<br>
&lt;kbabbitt> ... perhaps if we had a separate value it could fix all these problems at once<br>
&lt;kbabbitt> ... so I'm not convinced we should have appearance: base-select apply to listbox mode<br>
&lt;kbabbitt> ... wonder if we should have a separate value<br>
&lt;kbabbitt> ... very clear we need a way to style listboxes, not sure if it should be base-select or a different value<br>
&lt;astearns> ack keithamus<br>
&lt;kbabbitt> keithamus: my understanding is that popoover element that would provide list of options<br>
&lt;kbabbitt> ...that can be styled as display:block which would make it part of page flow<br>
&lt;kbabbitt> ... then you'd have a listbox style control<br>
&lt;kbabbitt> ... overlay property would be the one<br>
&lt;kbabbitt> ... so you can put it as part of page flow rather than as popover<br>
&lt;kbabbitt> ... does that satisfy the query?<br>
&lt;kbabbitt> lea: not sure I understand the proposal<br>
&lt;kbabbitt> keithamus: your query is between the two modes, and I don't think they're modes, I think the pseudo elements are the same but you'd effectivaly style the dropdown so it would be part of the page<br>
&lt;kbabbitt> lea: you'll still have the selected content element<br>
&lt;kbabbitt> keithamus: you can omit that or display: none it<br>
&lt;kbabbitt> lea: or we go the opposite way from listbox from dropdown which is more commonly needed<br>
&lt;kbabbitt> keithamus: two modes are, picker element is either popovert or now<br>
&lt;kbabbitt> ... and selected content is either displayed or not<br>
&lt;kbabbitt> lea: downside of that is you need to implement yourselves how dropdown would look for listbox appearance<br>
&lt;kbabbitt> ... you have a listbox and you have to write several css rules to make it look like a dropdown<br>
&lt;kbabbitt> keithamus: one point of base-select is ... [missed] ... you'd have some default styling<br>
&lt;kbabbitt> ... it should be consistent, whether it would be a matter of ... I'm curious why we would need to put effort into .... why an author would need to put effort into making it look native<br>
&lt;florian> q?<br>
&lt;kbabbitt> lea: not saying they want to make it look like listbox widget, saying they want to make it look like a listbox ... not just a matter of a single css rule, would take several<br>
&lt;kbabbitt> ... when you start form a dropdwon, all of the css you have to write is to style it<br>
&lt;kbabbitt> ... when you start from a listbox and want to make it look like a dropdown, now you have to write a bunch more rules<br>
&lt;kbabbitt> keithamus: only difference is form control that opens the picker is the thing that is rendered on the page in a picker mode<br>
&lt;kbabbitt> ... in a listbox mode, the picker is rendered on the page and the button thing is not<br>
&lt;kbabbitt> ... so you're just display:none'ing on the button<br>
&lt;kbabbitt> ... and setting overlay none on picker<br>
&lt;kbabbitt> ... overlay auto on picker and display block on button<br>
&lt;kbabbitt> ... then you can have all your styles separate and they can be consistent<br>
&lt;kbabbitt> ... but maybe joey has some better answers here<br>
&lt;astearns> ack jarhar<br>
&lt;kbabbitt> jarhar: I've been working on an impl of this in Chromium<br>
&lt;kbabbitt> ... I believe that the different modes about listbox and popul and signle and multiple select should be controlled with existing html attributes<br>
&lt;kbabbitt> ... size=1 makes popup, size>1 makes it listbox<br>
&lt;kbabbitt> ... different modes should be controllabe with appearance:base-select<br>
&lt;kbabbitt> ... I don't think we need other values for appearancew<br>
&lt;lea> q?<br>
&lt;lea> q+<br>
&lt;kbabbitt> ... I don't think we need to control multi select or popup with css<br>
&lt;kbabbitt> ... it can be done with HTML<br>
&lt;kbabbitt> ... right now there are some issues liek you can't have select multiple with popup on desktop<br>
&lt;kbabbitt> ... on mobile you can't get a listbox<br>
&lt;kbabbitt> ... these are things I'm working on<br>
&lt;kbabbitt> astearns: jarhar you're saying the answer to the original question in the issue is, yes it should<br>
&lt;kbabbitt> .. answer to lea's new question is "no"<br>
&lt;kbabbitt> jarhar: correct<br>
&lt;astearns> ack lea<br>
&lt;kbabbitt> lea: the issue is not whether multipleness should be controlled by css<br>
&lt;kbabbitt> ... of course it should be controlled by html<br>
&lt;kbabbitt> ... problem is today when you specify multiple in select you always get a listbox, can't get a dropdown<br>
&lt;kbabbitt> ... presumably base-select would get you a styleable dropdown<br>
&lt;kbabbitt> jarhar: planning on separate change so that size=1 on select ? will give a popup<br>
&lt;kbabbitt> lea: regardless of whether you specify base-select? don't know if that's web compatible<br>
&lt;kbabbitt> jarhar: correct, wqill fild out if it's web compatible<br>
&lt;kbabbitt> lea: some data points we're missing for a decision here is how much code would be needed to make a decision here<br>
&lt;kbabbitt> ... would be helpful if keithamus could write snippets in issue to show what switching would look like<br>
&lt;kbabbitt> ... maybe I'm wrong and it's just a couple css rules and it'llo be fine<br>
&lt;kbabbitt> astearns: I think that makes sense, we should take it back to the issue and go through some example code<br>
&lt;kbabbitt> ... thank you jarhar<br>
&lt;kbabbitt> lea: could we have a resolution to [missed]<br>
&lt;lea> s/lea: could we have a resolution to [missed]/lea: could we have a resolution that we want listboxes to be stylable, with the exact syntax TBD/<br>
&lt;kbabbitt> astearns: [discussing what resolution we could take]<br>
&lt;chrishtr> +1 to going with joey's approach and then reconsidering if it is found web-incompatible<br>
&lt;kbabbitt> lea: I'm fine with that<br>
&lt;kbabbitt> astearns: we often take resolutions hoping something will be web compatibvle<br>
&lt;kbabbitt> astearns; jarhar could you summarize resolution for this issue that you plan to implement?<br>
&lt;jarhar> proposed resolution: appearance: base-select can be used to opt listbox selects into base appearance. control of listbox and multiple rendering will be improved in html<br>
&lt;kbabbitt> astearns: does that look okay to you lea?<br>
&lt;kbabbitt> lea: I think so, also concept that size is distinct from whether you want a listbox or dropdown<br>
&lt;kbabbitt> ... how long the dropdown is is a CSS thing but that's secondary<br>
&lt;kbabbitt> astearns: let's go with proposed resolution for now<br>
&lt;kbabbitt> ... any objections?<br>
&lt;keithamus> +1<br>
&lt;astearns> ack fantasai<br>
&lt;kbabbitt> fantasai: reason we use base-select here was to allow for progressive opting in more controls<br>
&lt;kbabbitt> ... and avoiding compat issues<br>
&lt;kbabbitt> ... are concerned about that, or are other controls shipping ?<br>
&lt;kbabbitt> jarhar: I'm personally not concerned about using same keyword<br>
&lt;kbabbitt> ... but I'm open to suggestions<br>
&lt;kbabbitt> fantasai: ok we can go with this<br>
&lt;chrishtr> I think it's fine for both to use base-select. We can reconsider if it is found to be web-incompatible.<br>
&lt;jarhar> RESOLVED: appearance: base-select can be used to opt listbox selects into base appearance. control of listbox and multiple rendering will be improved in html<br>
&lt;kbabbitt> RESOLVED: appearance: base-select can be used to opt listbox selects into base appearance. control of listbox and multiple rendering will be improved in html<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12468#issuecomment-3079365750 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 16 July 2025 16:24:29 UTC