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.

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

Solution 2

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border:none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
  transition: background-color 5000s ease-in-out 0s;
}

This seems to fix the after-effect of the yellow re-populating on mouseleave

Solution 3

.form-item-search-block-form input:focus, 
.form-item-search-block-form input:hover, 
.form-item-search-block-form input:active {
    outline: 0 none;
    border: 0 none;
    background: #282828;
    background: url("../images/search_btn.png") no-repeat 96% 9px;
    color: rgb(202,202,202);
}

.form-item-search-block-form input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #282828 inset;
    -moz-box-shadow: 0 0 0 1000px #282828 inset;
    box-shadow: 0 0 0 1000px #282828 inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    -webkit-text-fill-color: #eee !important;
}

Comments

[Anwar]

Do you mind turning the autocomplete to false ? It could radically solve your issue.

[Juliver Galleto]

@Zeratops: how to do that?

[Alupotha]

Possible duplicate: [stackoverflow.com/questions/2781549/…

[Anwar]

Like this. Simply add autocomplete="off" in your inputs.

[Juliver Galleto]

@Zeratops: cool, this works at least not able to see that ugly background on autofill. thank you!

[jbutler483]

possible duplicate of Google Chrome form autofill and its yellow background

[Juliver Galleto]

will thats what i tried earlier but seems not working still, I have a custom background image on my input and what i want is to remain that background image in any cases.

[Juliver Galleto]

autocomplete off. thats the least I could do for this ugly issue right now. thank you.

[Christopher Davies]

This worked for me. Unfortunately, I wanted to make my background transparent (so you could see an icon behind it) and that made it show the yellow again so the icon was still covered. But for those who want the background to be solid, this seems to work.

[YannickHelmut]

Just one thing, your should add box-shadow: 0 1px 0 0 #26a69a, inset 0 0 0px 9999px white so that your box-shadow line stays when you have material-design inputs ;)

[Carl Boneri]

haha thanks for the tip! I'm an analyst; html and css are not my thing

[Naseem Ahamed]

Thanks! I was brooding over it for a long time.