html - 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.