[BUG] - Chrome autofill changes background color for Input component

[twirlse]

Describe the bug

When selecting a value from chrome autocomplete its background changes to lightblue.

Your Example Website or App

Please see sample at https://github.com/twirlse/nextui-autocomplete-bug

Steps to Reproduce the Bug or Issue

Create an input that Chrome has autocomplete values for (i.e. email). See attached animation.

Expected behavior

Background color for input should not change.

Screenshots or Videos

Operating System Version

Windows

Browser

Chrome

[jguddas]

Background color for input should not change.

Strongly disagree, we should definitely reflect user action.

Maybe do it in a prettier way tho :)

[twirlse]

Well at least it should look nice. I haven't seen (or probably haven't noticed) this behavior on other sites.

[jrgarciadev]

@jguddas Maybe we could take leverage of TailwindCSS autofill pseudo class https://tailwindcss.com/docs/hover-focus-and-other-states#autofill

[jguddas]

Sure, do you have a certain background color that we should go for, and should it be applied to the whole Input or just the input html element?

[SohamSen15]

Try to style the input component using the following style:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 40px white inset !important;
}

This usually removes the autofill colour changes made by the browsers.

[twirlse]

Yeah, absolutely, except, maybe, use a variable for the background color

[bfourgeaud]

Even adding a color doesn't work with error states for example ...

Solution would be :

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    transition: background-color 5000s ease-in-out 0s;
}

[getellez]

Why the inputs in the documentation doesn't have this behavior?