[csswg-drafts] [css-forms-1] UA styles for base appearance listbox select elements (#12510)

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

== [css-forms-1] UA styles for base appearance listbox select elements ==
We already decided on UA styles for base appearance drop-down single-select elements here: https://github.com/w3c/csswg-drafts/issues/10857

I'd like to decide on UA styles for listbox select elements, with or without the multiple attribute. Most of the styles from drop-down single-selects can be reused, but here are some changes I'd like to propose. Until https://github.com/w3c/csswg-drafts/issues/7422 gets resolved, I'm going to write these with a `:has-picker` pseudo-class.

Make these style which currently apply to the select element only apply to drop-down selects:
```css
select:has-picker {
  border-radius: 0.5em;
  padding-block: 0.25em;
  padding-inline: 0.5em;
  min-block-size: calc-size(auto, max(size, 24px, 1lh));
  min-inline-size: calc-size(auto, max(size, 24px));
  display: inline-flex;
  gap: 0.5em;
  field-sizing: content !important;
  box-sizing: border-box;
}
```

Add these styles which only apply to listbox selects:
```css
select:not(:has-picker) {
  display: inline-block;
  overflow-inline: auto;
  overflow-block: auto;
}
```

Change the selectors of the hover/active/disabled rules to only apply when the select has a picker:
```css
select:has-picker:enabled:hover {
  ...
}
select:has-picker:enabled:active {
  ...
}
select:has-picker:disabled {
  ...
}
```

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


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

Received on Monday, 21 July 2025 19:35:34 UTC