Post

Wild how far you can push "customizable select" with just #CSS nerdy.dev/nice-select

Jake Archibald

@jakearchibald.com

17 Feb

Why <fieldset> rather than <optgroup>, for better fallback rendering?

Luke

@lukewarlow.dev

17 Feb

Btw Adam if you're running into styling issues using optgroup it's almost definitely a bug. We specifically allowed legend as the first child of optgroup so you could do rich content in it.

Jake Archibald

@jakearchibald.com

17 Feb

Also, you can use attr() to pull the content from the optgroup label into the legend (via a custom prop)

Adam Argyle

@nerdy.dev

17 Feb

I was following what Joey shared to me as well as hints in the docs here open-ui.org/components/c... I did inspect UA shadow DOM to style the optgroup but maybe there is a bug yeah as I couldn’t select just the label part

open-ui.orgCustomizable Select Element (Explainer) | Open UIOpen UI

Luke

@lukewarlow.dev

So I think the styling story is using legend because then you can select it in CSS, I think just the label attribute on optgroup does remain less styleable. Though including it is better for older (and non chromium) browsers.

17/2/26, 2:58 pm0 reposts0 likes

Adam Argyle

@nerdy.dev

17 Feb

demos updated: - fieldset -> optgroup with label for better fallback + match desired semantics

Jake Archibald

@jakearchibald.com

17 Feb

Niiice! Fwiw, you can avoid the text repetition by using attr(label) to save the text to a custom property, then use CSS content on a pseudo to output it.