[csswg-drafts] [selectors] Add pseudo-classes for `<select>` being a drop-down box vs a list box (#7422)

zcorpan has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors] Add pseudo-classes for `<select>` being a drop-down box vs a list box ==
See https://github.com/whatwg/html/issues/7050

Chromium [supports](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/resources/html.css;l=909?q=html.css&ss=chromium) a `:-internal-list-box` pseudo-class in the UA stylesheet, which matches [`<select>` elements that render as a list box instead of as a dropdown box](https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2).

Gecko similarly [supports](https://searchfox.org/mozilla-central/source/layout/style/res/forms.css#249) `:-moz-select-list-box` in the UA stylesheet.

WebKit [seems to use attribute selectors instead](https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/html.css#L1060), although I think it's not entirely accurate since [the decision per spec](https://html.spec.whatwg.org/multipage/rendering.html#list-box) depends on the [parsing result of the `size` attribute](https://html.spec.whatwg.org/multipage/form-elements.html#concept-select-size). (Demo: `<select size="+02xyz">`)

Web developers could rely on the `multiple` attribute being present to target list boxes, but that might not always work so well, in particular if you're writing CSS that should work for arbitrary HTML.

I think it makes sense to add a pseudo-class that matches `select` elements that are list boxes, e.g. `:select-list-box`. To match drop-downs, you can do `select:not(:select-list-box)`.

Spec: https://drafts.csswg.org/selectors/

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7422 using your GitHub account


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

Received on Monday, 27 June 2022 20:43:37 UTC