Remove the yellow background on input on autofill

Question

Anyone knows how to remove this ugly chrome background when autofill? (Refer below.)

So far I tried:

*:focus {     outline: 0; } input:-webkit-autofill {     -webkit-box-shadow: none;     -webkit-text-fill-color: #fff !important; } button:focus, input:focus, a:focus {     text-decoration: none !important;     outline: none !important; } 

Sadly, none of them works. Any help, ideas, clues, suggestions would be greatly appreciated.

Answer 1

Oddly enough this is the intended behaviour from webkit to let the user infer it was autofilled.

[email protected] We inherit this coloring behavior from WebKit and I believe it's by design. It allows the user to understand the data has been prefilled.

You can use:

input:-webkit-autofill {     -webkit-box-shadow: 0 0 0px 1000px white inset; } 

Which will change the background to white.

You can also turn auto complete off by adding:

autocomplete="off" 

E.g

<input type="text" name="some_name" autocomplete="off"></input> 

To your input, but for usability I would suggest against this.

Answer 2

Add this to your header

input:-webkit-autofill, input:-webkit-autofill:hover,  input:-webkit-autofill:focus input:-webkit-autofill,  textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {   border:none !important;   -webkit-text-fill-color: inherit !important;   -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;   transition: background-color 5000s ease-in-out 0s; } 

This seems to fix the after-effect of the yellow re-populating on mouseleave