Google Chrome form autofill and its yellow backgro

Question

I have design problem with Google Chrome and its form autofill function. If Chrome remembers some login/password it changes a background color to a yellow one.

Here are some screenshots:

How to remove that background or just disable this autofill ?

Answer 1

Adding autocomplete="off" is not gonna cut it.

Change input type attribute to type="search".
Google doesn't apply auto-fill to inputs with a type of search.

Hope this saves you some time.

Answer 2

Worked for me, only the css change required.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

you can put any color in place of #ffffff.

Answer 3

The following CSS removes the yellow background color and replaces it with a background color of your choosing. It doesn't disable auto-fill and it requires no jQuery or Javascript hacks.

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

Solution copied from: Override browser form-filling and input highlighting with HTML/CSS

Answer 4

The only way that works for me was:(jQuery required)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});