All topics

Select Option Styling

Fisher

2 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

2 months ago
pinging toddle-hero 's 🙂
Lucas G

2 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

2 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

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

1 month ago
It is coming though

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

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

1 month 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

1 month ago
Really? Thanks I'll check that out!

Select Option Styling

Fisher

Fisher

Lucas G

Lucas G

Fisher

Andreas Møller

Kai

Kamil

Fisher

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community