how to remove blue background on chrome autocomplete

Question

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?

Koralle

Answer 1

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

Down

There is literally an answer for everything. Thanks. – Punctual

This is so silly. How can we control the box-shadow on input elements if Google is hacking it like this? – Brummell

@Brummell it's us hacking, when we apply this CSS. Unfortunately, the hack doesn't just stop here. If you have your own shadows set, you have to specify multiple shadow effects now. Docs: developer.mozilla.org/en-US/docs/Web/CSS/box-shadow, relevant question: #8557104 – Earshot

Exactly what I was looking for. Thanks!! – Petrify

Answer 2

You may not be able to remove it on Chrome with CSS. This has gotten steadily more difficult recently as Google is hip to all of the ways developers try to hide or manipulate their consumer-oriented features. At least they changed recently to blue background instead of yellow. To avoid completely the only way I found is to use an incognito or guest window.

Dateline