Customize dark mode styles for floating labels on selects...

[MacelinCane]

Hi.
I'm having no luck overwriting the dark:peer-focus:text-primary that is rendered by the select component.
At least I believe that's the style I need to overwrite.
My primary color is a little dark for dark mode, so I need to customize it.
I'm able to style labels easily for standard fields, but for selects, I've tried everything I've read and can think of.

• I've wrapped in a div with the class I wanted to overwrite it with - did not work
• I've added the class to the select and to the label. That didn't work.
• When I clean dark:peer-focus:text-primary using chrome inspector, it renders correctly, using the dark:peer-focus:text-gray-200 I've boxed in green.
  I've read something about "notches" but I don't know what those are.

Lavavel project. PHPStorm, Vite.
Thanks!

[juujisai]

Hi! You can use class customization for that. Checkout the API tab to see what you can customize https://tw-elements.com/docs/standard/forms/select/#docsTabsAPI

    <select 
      data-te-select-init
      data-te-class-select-label="pointer-events-none absolute top-0 left-3 mb-0 max-w-[90%] origin-[0_0] truncate text-gray-500 transition-all duration-200 ease-out peer-focus:scale-[0.8] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-gray-200 dark:peer-focus:text-gray-200 data-[te-input-state-active]:scale-[0.8]"
      >
      ...

[MacelinCane]

Thanks! No one on my team saw those API buttons on a few of the docs pages until you mentioned it :)

[MykytaShorst]

Hi @juujisai
I tried to add custom styles to tw-element select options.
but custom class remove default classes.
how can I solve this?
thanks

[juujisai]

Hello @MykytaShorst! Our class customization is replacing the classes not adding/removing them. You would have to copy classes of the element that you want and then edit the ones you want to be changed. You can also try to look for an element with querySelectors and add new classes via JS.

Link to our Classes section inside the API tab:

https://tw-elements.com/docs/standard/forms/inputs/#api-section-classes