Select Option Styling

  • frankenwompus-1293978852313403463

    Fisher

    6 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!
    1293978852468457563-
  • frankenwompus-1294293033193439263

    Fisher

    6 months ago

    pinging toddle-hero 's 🙂
  • lucasg-1294314986692149299

    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
  • lucasg-1294315535647117404

    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
  • frankenwompus-1294328435253973003

    Fisher

    6 months ago

    Ah, fair enough. Thanks for taking a look!
    👍1
  • andreasmoller-1294909097581477970

    Andreas Møller

    6 months ago

  • And it only took them 20 years
  • magical_fawn_52793-1294928237738332231

    Kai

    6 months ago

    yes some things are going really fast in the browser's world. Another 10 for scroll bar styling needed😉🤣
  • kamilnader-1294930399495061546

    Kamil

    6 months ago

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

    Fisher

    6 months ago

    Really? Thanks I'll check that out!