HTML Forms – How to Remove Yellow Background on Input Autofill

cssformshtmlinput

Anyone knows how to remove this ugly chrome background when autofill? (Refer below.)

enter image description here

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.

Best Answer

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.

Related Question