How can we change the select current option without using css variables?

[royeradames]

The current select option needs to change styles from the blue background and white text to white background to purple text.

We can achieve this by changing the css variables

<SlOption
            key={i}
            value={option.value}
            className="
            group
            [&::part(prefix)]:flex-none
            [&::part(suffix)]:flex-none
            [&::part(label)]:flex-none
            [&::part(checked-icon)]:hidden
            [&::part(base)]:aria-selected:bg-white
            [&::part(base)]:aria-selected:text-purple
            [&::part(base)]:[--sl-color-neutral-0:var(--purple)]
            [&::part(base)]:[--sl-color-primary-600:white]
            "
          >
            <div slot="prefix">
              <GitHubLogoIcon></GitHubLogoIcon>
            </div>
            {option.label}
            <div slot="suffix" className=" hidden group-aria-selected:inline">
              (selected)
            </div>
</SlOption>

Now how can we achieve this without changing the css variable. So that we can use tailwind colors define in the config instead of the css variables we have to duplicate.

Originally, I was try tailwind group on the base part and depending if the base part has the option--current I can apply the styles but I got no luck in my part.

If we where able to change the styles base if the class is there or maybe we can add a attribute on the option that let us know that is the current one. We can change the hover styles of the current option.

[royeradames]

I would had expected this to work but it doesn't.

sl-option::part(base).option--current {
    background-color: white; 
    color: mediumpurple;
}
sl-option::part(base).option--current:hover {
    background-color: grey; 
}

Not being able to fully customize it and having to deal with this big learning curve is a turn off.

[royeradames]

We are missing an aria-current="true" on the sl-option. Like what we have for aria-selected="true"

[mdn aria-current](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current_

[claviska]

@KonnorRogers have we added custom states for this in Web Awesome yet? If so, can we backport it to Shoelace?

[intaek-h]

is this fixed? i am having trouble styling selected option element with css.

[claviska]

We're looking to add custom states in 3.0 (Web Awesome) so this will be easier. For now, you can target the selection option like this:

sl-option[aria-selected="true"]::part(base) {
  background: tomato;
  color: white;
}