Remove the yellow background on input on autofill

Question

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.

Do you mind turning the autocomplete to false ? It could radically solve your issue. — Anwar, Mar 18 '15 at 11:12
Possible duplicate: [http://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete] — Alupotha, Mar 18 '15 at 11:16
[Like this](http://www.w3schools.com/tags/att_input_autocomplete.asp). Simply add `autocomplete="off"` in your inputs. — Anwar, Mar 18 '15 at 11:22
@Zeratops: cool, this works at least not able to see that ugly background on autofill. thank you! — Juliver Galleto, Mar 18 '15 at 11:25
possible duplicate of [Google Chrome form autofill and its yellow background](http://stackoverflow.com/questions/2920306/google-chrome-form-autofill-and-its-yellow-background) — jbutler483, Mar 18 '15 at 11:25

score 36 · Accepted Answer · edited Apr 16 '18 at 08:44

36

Oddly enough this is the intended behaviour from webkit to let the user infer it was autofilled.

ben@chromium.org 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.

edited Apr 16 '18 at 08:44

yodabar

4,651
2
33
38

answered Mar 18 '15 at 11:12

Ryan McDonough

9,732
3
55
76

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 Mar 18 '15 at 11:17
autocomplete off. thats the least I could do for this ugly issue right now. thank you. – Juliver Galleto Mar 18 '15 at 11:27
Thanks! I was brooding over it for a long time. – Naseem Ahamed Oct 18 '21 at 13:27

score 10 · Answer 2 · edited Jun 20 '20 at 09:12

10

Add this to your header

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 14 '16 at 17:18

Carl Boneri

2,632
1
13
15

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 ;) – YannickHelmut Jan 31 '17 at 16:01
haha thanks for the tip! I'm an analyst; html and css are not my thing – Carl Boneri Jan 31 '17 at 16:04

score 1 · Answer 3 · edited Apr 10 '18 at 11:13

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

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. — Christopher Davies, Mar 12 '16 at 23:40

Remove the yellow background on input on autofill

3 Answers3

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

Linked