All topics

Select Option Styling

Fisher

7 months ago

Does anyone know how to style an Option in a Select / Drop Down? I have the attached photo going on, but I'd like the "+6", "+5" and "+1" to be different colors. I already have that showing only if certain criteria are met via a formula. You can see that the different parts of the text are broken out into different h4's for this purpose, but for whatever reason changing the style on the h4's don't affect those parts at all. Changing the "option" styling does change things, but I don't want the whole thing changed, just the last bit.

Thanks!
Fisher

6 months ago

pinging toddle-hero 's 🙂
Lucas G

6 months ago

All browsers have their own way of styling select items and if you use the base select element, it'll look different depending on the browser you use
You can style the select element itself with CSS but the option items are mostly styled by the browser
So short answer is no, can't be done unless you create your own
Lucas G

6 months ago

Creating your own select element means also having to add all the aria attributes for accessibility and keyboard navigation, etc
@Lucas G
Creating your own select element means also having to add all the aria attributes for accessibility and keyboard navigation, etc
Fisher

6 months ago

Ah, fair enough. Thanks for taking a look!
👍1
Andreas Møller

6 months ago

It is coming though

https://developer.chrome.com/blog/rfc-customizable-select
And it only took them 20 years
Kai

6 months ago

yes some things are going really fast in the browser's world. Another 10 for scroll bar styling needed… 😉🤣
Kamil

6 months ago

@Fisher , you can use the Shoelace package. There is a select component that you can style however you want.
👍1
@Kamil
@Fisher , you can use the Shoelace package. There is a select component that you can style however you want.
Fisher

6 months ago

Really? Thanks I'll check that out!

Select Option Styling

Fisher

Fisher

Lucas G

Lucas G

Fisher

Andreas Møller

Kai

Kamil

Fisher