Add css config for clear button

[damir]

Hi Max,

There is no option to configure css class for clear button, it looks like this when switching to dark mode:

[maxmarcon]

Hi @damir . Good point, there isn't an option for that atm!

I will add it as soon as I find some time.

In the meantime you can add a css rule as workaround. Something like this should work:

div[phx-hook=LiveSelect] button[phx-click=clear] {
   color: white
}

Let me know if you could make it work.

[maxmarcon]

Note to self with additional TODOs:

1. apply relative position to clear button's parent, so it is positioned correctly even with style=none
2. do not apply relative position to entire liveselect component when style=tailwind, as it's useless

[damir]

That works, thanks for the hint! I am using petal components and it looks like this:

html.dark div[phx-hook='LiveSelect'] button[phx-click='clear'] {
  @apply text-gray-500;
}

[maxmarcon]

added to release 1.2.0.

The option is called: clear_button_class