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.