Chrome Autocomplete Background – How to Remove Blue Background in Chrome Autocomplete

autocompletebackground-colorcssgoogle-chrome

I am making a form and want each input to have be transparent but when I use the autocomplete feature in Chrome and then tab into the next field, the previous field gets a pale blue background.

I have tried using:

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    transition: background-color 5000s ease-in-out 0s;
}  

but this doesn't work. I don't want a white background I want it remain transparent when clicking into another input and setting the color to transparent doesn't work either.

How can this be achieved?

Best Answer

Google seems to have done some magic with the shadow property. This made it work for me:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}
Related Question