Choices-js / Choices

A vanilla JS customisable select box/text input plugin ⚡️
https://choices-js.github.io/Choices/
MIT License
6.06k stars 598 forks source link

Ability to add classes to the various elements at different stages #1108

Closed tomgreenhill closed 1 year ago

tomgreenhill commented 1 year ago

Describe the solution you'd like I would love (unless I'm mistaken and there's a way to do it already) a way to target the Choices wrapper when a selection has been made.

Describe alternatives you've considered I've attempted to fudge together a solution using the :has selector but this doesn't work when working with selects that only have one option, nor is it consistent. That aside it just feels pretty hacky.

.choices {  

  &:has(.is-selected:not(.choices__placeholder):not([data-value=""])) {  

    .choices__inner {  
      border-color: var(--color-primary);  
    }  
  }  
}

Additional context It doesn't appear immediately obvious, to me at least, if this could be solved using the template options. I figure also that the element I wish to target is rendered once and I'm not aware of any events to hook off.

Thanks and apologies in advance if I've missed something!

tomgreenhill commented 1 year ago

I think I've been approaching it wrong and will instead try watching for value changes and applying a class that way round.