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

> If we make the fallback button "invisible", then when the author provides their own button should we make that one "invisible" too? Or should we make the author apply more styles to make the <select>'s box "invisible"? For example, we could end up with the situation where by default both the <select> has a border and the author provided <button> has a border. I don't think this would ever be desirable, and ideally we wouldn't put the burden on the author to pick one of the borders and remove the other.

You could put the select box `appearance: base` styles apply to `select:not(:has(> button))` (or some internal pseudo-class which would represent when the fallback is used), then you wouldn't have conflicting styles if the developer wants to use their own button. If the developer specifies their own button, we can safely assume they want full control over the button, rather than trying to aim for backwards compatibility (which would likely be impossible in this case).

> I'm also worried about the focus ring being rendered around the invisible fallback button inside the visible select, which would for example make the focus ring get rendered inside of the border and look wrong. I suppose that's something I could try adding a bunch of special casing for in the rendering of focus rings but I'd prefer not to try that.

If the fallback button has the full size of the select in-page box, it's likely not super noticeable. Though I think you'd want to defer focus to the parent select in this case, since authors who've previously defined styles for `select:focus-visible` would likely want them to keep working.

-- 
GitHub Notification of comment by nt1m
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10717#issuecomment-2278872380 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 23:23:14 UTC