Applying style to inputs doesn't work

[IT-Joris]

Flux version

v2.2.1

Livewire version

v3.6.3

Tailwind version

v4.1.11

Browser and Operating System

Firefox/Brave MacOs

What is the problem?

Hello,

Following the update including the "Feedback" example, I tried to add a title with a transparent background.

However, the classes applied don't seem to directly affect the input element, which makes it impossible to customize the background (for example, by making it transparent).

I tested with several field types - some like <textarea> or some <select> work correctly - but the problem persists with <input>.

Example whit bug

Code snippets

<div class="space-y-6">
    <flux:input placeholder="What is the issue about?" class="dark:bg-transparent!"/>

    <flux:textarea placeholder="Please include reproduction steps. You may attach images or video files."
                   class="dark:bg-transparent!"
    />

    <flux:select wire:model="industry" placeholder="Choose industry..." class="dark:bg-transparent!">
        <flux:select.option>Other</flux:select.option>
    </flux:select>

    <flux:select variant="listbox" placeholder="Choose industry..." class="dark:bg-transparent!">
        <flux:select.option>Photography</flux:select.option>
    </flux:select>

    <flux:input.group>
        <flux:input placeholder="Post title" class="dark:bg-transparent!"/>

        <flux:button icon="plus" class="dark:bg-transparent!">New post</flux:button>
    </flux:input.group>

    <flux:input.group>
        <flux:select class="max-w-fit dark:bg-transparent!">
            <flux:select.option selected>USD</flux:select.option>
            <!-- ... -->
        </flux:select>

        <flux:input placeholder="$99.99" class="dark:bg-transparent!" />
    </flux:input.group>
</div>

How do you expect it to work?

The correct behavior would be for classes to impact elements, as in this example

Example without bug

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[jeffchown]

@IT-Joris Have you tried class:input? e.g.
<flux:input class="max-w-xs" class:input="font-mono" />

Docs: https://fluxui.dev/components/input#class-targeting

[Godrade]

@jeffchown
I completely missed it, thanks!

Indeed, on most elements, it works, although some elements do not take classes into account.

        <flux:select variant="listbox" placeholder="Choose industry..." class="dark:bg-transparent!">
            <flux:select.option>Photography</flux:select.option>
        </flux:select>

And

        <flux:date-picker />

Unless I add <x-slot name="trigger">

        <flux:date-picker>
            <x-slot name="trigger">
                <flux:date-picker.input class:input="dark:bg-transparent!"/>
            </x-slot>
        </flux:date-picker>

[jeffchown]

You're welcome, @Godrade

Yes, for some elements you will have to take the approach you mention as their inputs are nested within another parent element.

[Godrade]

Oh, I didn't notice, I replied with my personal account ahah
I'm @IT-Joris

But for example for this one, can't I make it transparent?

<flux:select variant="listbox" placeholder="Choose industry..." class="dark:bg-transparent!">
      <flux:select.option>Photography</flux:select.option>
</flux:select>

Or

<flux:date-picker />

[jeffchown]

@IT-Joris I think you could do much the same thing you did with date-picker by using the button slot: https://fluxui.dev/components/select#the-button-slot

[IT-Joris]

Yes, indeed, trying to add buttons for the 2 components, I manage to pass them classes with the examples below.

        <flux:select variant="listbox" placeholder="Choose industry..." class="dark:bg-transparent!">
            <x-slot name="button">
                <flux:select.button class="dark:bg-transparent!" placeholder="Choose industry..."/>
            </x-slot>
            <flux:select.option>Photography</flux:select.option>
        </flux:select>

        <flux:date-picker>
            <x-slot name="trigger">
                <flux:date-picker.button class="dark:bg-transparent!" placeholder="Choose date..."/>
            </x-slot>
        </flux:date-picker>

Thanks for your help @jeffchown !