Re: [csswg-drafts] [css-ui] Pseudo-element for select's UA button (#10717)

https://open-ui.org/components/customizableselect/#customizing-basic-styles

The explainer has:

```
<select>
  <option>one</option>
  <option>two</option>
</select>
<style>
select, select::select-fallback-button {
  font-family: monospace;
  font-size: 12px;
}
</style>
```

I think that is a really unfortunate developer experience to have to specify both selectors. I really think this "fallback button" should only visible to the user agent. I don't think engineering wise it's an insurmountable challenge and it preserves backwards compatibility, which is nice.

Maybe consider making the fallback button full size, but "invisible" (deferring all of its styling to the parent select):

```
#fallback-button {
   /* reset some button styles to make button "invisible" (potentially `all: unset` could work here too) */
   background: unset;
   border: unset;
   color: unset; /* essentially the same as inherit / currentColor in this context */

   /* make it take the full size of the in-page box */
   width: 100%;
   height: 100%;
}
```

Then the `appearance: base` UA stylesheet would put its base styles (arrow icon, border, padding, etc.) on `select:-internal-uses-fallback-button` or such.

-- 
GitHub Notification of comment by nt1m
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10717#issuecomment-2277349094 using your GitHub account


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

Received on Friday, 9 August 2024 07:40:00 UTC