cssgoogle-chromeautocompletebackground-color

how to remove blue background on chrome autocomplete


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?


Solution

  • 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;
    }