[csswg-drafts] [css-ui] UA stylesheet for appearance:base `<select>` (#10857)

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

== [css-ui] UA stylesheet for appearance:base `<select>` ==
I'd like to propose a UA stylesheet for `<select>` which applies when the `<select>` has `size=1`, no `multiple` attribute, and `appearance:base`.

Based on the discussion [here](https://github.com/w3c/csswg-drafts/issues/10028) and the proof of concept in the chromium prototype I implemented, we can make these styles only apply when `<select>` has `appearance:base`.

```css
select {
  padding: 0.25em;
  border: 1px solid ButtonBorder;
  border-radius: 0.25em;
  display: inline-block;
  box-sizing: border-box;
  min-block-size: 24px;
  min-inline-size: 24px;
  color: FieldText;
  background-color: Field;
  white-space: normal;
}

select::picker(select) {
  box-shadow: 0px 12.8px 28.8px rgba(0, 0, 0, 0.13), 0px 0px 9.2px rgba(0, 0, 0, 0.11);
  box-sizing: border-box;
  overflow: auto;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25em;
  padding-block: 0.25em;
  padding-inline: 0;
  background-color: Field;
  margin: 0;
  inset: auto;
  min-inline-size: anchor-size(self-inline);
  min-block-size: 1lh;
  position-area: block-end span-inline-end;
  position-try-fallbacks:
    block-start span-inline-end,
    block-end span-inline-start,
    block-start span-inline-start;
}

select option {
  min-inline-size: 24px;
  min-block-size: 24px;
  align-content: center;
  display: block;
  padding-block-start: 0;
  padding-block-end: 1px;
  padding-inline: 2px;
  white-space: nowrap;
}

select option:hover {
  background-color: SelectedItem;
  color: SelectedItemText;
}

select option::before {
  content: '\2713' / '';
}
select option:not(:checked)::before {
  visibility: hidden;
}

select::after {
  padding-inline-start: 0.5em;
  display: block;
  content: counter(fake-counter-name, disclosure-open);
}
select:not(:open)::after {
  content: counter(fake-counter-name, disclosure-closed);
}
```

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


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

Received on Monday, 9 September 2024 19:01:49 UTC