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