Remove The Yellow Background On Input On Autofill

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: n

Solution 1:

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: 000px1000px white inset;
}

Which will change the background to white.

You can also turn auto complete off by adding:

autocomplete="off"

E.g

<inputtype="text" name="some_name" autocomplete="off"></input>

To your input, but for usability I would suggest against this.

Solution 2:

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: 000px1000px#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-forminput:focus, 
.form-item-search-block-forminput:hover, 
.form-item-search-block-forminput: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-forminput:-webkit-autofill {
    -webkit-box-shadow: 0001000px#282828 inset;
    -moz-box-shadow: 0001000px#282828 inset;
    box-shadow: 0001000px#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;
}