Text inputs have a white background from chrome autocomplete suggestions on Windows

[mauritskorse]

Once again a weird chrome issue.

The built in autocomplete suggestions provided by Chrome cause the background color of the input fields to turn white when hovering over the suggestions. See the two screenshots (first is normal state, second is when hovering over the suggestions.)

My setup is a new laravel project, flux pro 1.0.14, tailwind uses darkMode through selector

  <flux:input type="search" icon="magnifying-glass" wire:model.live="query" placeholder="Search icons..." >
      <x-slot name="iconTrailing" class="flex gap-2">
          <flux:badge variant="pill" size="sm">{{ $this->iconCount }} icons</flux:badge>
          <flux:button size="sm" variant="subtle" iconVariant="outline" icon="tabler.filter" class="-mr-1" />
      </x-slot>
  </flux:input>

// tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        "./vendor/livewire/flux-pro/stubs/**/*.blade.php",
        "./vendor/livewire/flux/stubs/**/*.blade.php",
    ],
    darkMode: 'selector',
    //...
}

To fix the issue I could add the following css:

body.dark input:-webkit-autofill,
body.dark input:-webkit-autofill:hover, 
body.dark input:-webkit-autofill:focus, 
body.dark input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
    caret-color: white;
}

[joshhanley]

@mauritskorse can you please also share what OS you are using and what Chrome version you are on. Thanks!

[mauritskorse]

I have it on various chrome-based browsers on Win 11:

• Google Chrome | 130.0.6723.59
• Brave | 1.71.114 Chromium: 130.0.6723.58
• Vivaldi | 6.9.3447.54 Chrome/128.0.0.0

I cant reproduce it on Firefox.

[calebporzio]

Thanks for this report - I think I recall hearing about this at some point early-on, but then pulling a "works on my machine". I think this is only something that happens on Windows. Anyhow, thanks for providing the CSS fix. As soon as I can test this on windows I will try to address it.

[joshhanley]

@mauritskorse I was just looking at this again and noticed you are using Tailwind Forms. If you remove that, does it fix the issue?

[mauritskorse]

Nope, unfortunately...

[jeffchown]

@mauritskorse You mention your Flux version is 1.0.14. The current version is 1.0.29. Could you please?:

• Update to the latest version of Flux by running composer update livewire/flux livewire/flux-pro
• Delete any previously published Flux components (to avoid usage of old versions)
• Run npm run build to compile all CSS and JS assets
• Clear the view cache by running php artisan view:clear

and see if that helps?

[joshhanley]

@mauritskorse I've just tested this on two computers, one with Win 10 and the other Win 11, both using Chrome, one was on Chrome 122 and the other Chrome 131. Both computers displayed the input you provided as I would expect.

I'm going to close this issue as we cannot replicate it. Feel free to open a new issue if you find a way we can consistently replicate the issue.

[sertxudev]

I want to leave here my two cents.

The blueish background only appears if the field value has been selected from one of the autocomplete options.
The browser adds the field value to the autocomplete option list once a form is successfully submitted.

Using the following code, once the form is submitted it displays the dd modal, then reload the page (F5), clicking on the field will open the autocomplete options, then if we select one of them the field will render the blueish background.

Tested on Windows 10 using 131 and Flux version 1.0.32.

<div>
    <form class="space-y-4" wire:submit="submit">
        <flux:input wire:model="name" label="Name" />
        <flux:button type="submit">Save</flux:button>
    </form>
</div>

<?php

namespace App\Livewire;

use Livewire\Component;

class Test extends Component
{
    public $name = '';

    public function render()
    {
        return view('livewire.test');
    }

    public function submit()
    {
        dd('Record saved successfully.');
    }
}

---

FYI: Tailwind UI and shadcn/ui does not remove this blueish background on Chrome either.