Removing input background colour for Chrome autoco

Question

On a form I'm working on, Chrome is auto-filling the email and password fields. This is fine, however, Chrome changes the background colour to a pale yellow colour.

The design I'm working on is using light text on a dark background, so this really messes up the look of the form - I have stark yellow boxes and near-invisible white text. Once the field is focused, the fields return to normal.

Is it possible to stop Chrome changing the colour of these fields?

Answer 1

I have a better solution.

Setting the background to another color like below didn't solve the problem for me because I needed a transparent input field

-webkit-box-shadow: 0 0 0px 1000px white inset;

So I tried some other things and I came up with this:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

Answer 2

This has been as designed since this coloring behavior has been from WebKit. It allows the user to understand the data has been prefilled. Bug 1334

You could turn off autocomplete by doing (or on the specific form control:

<form autocomplete="off">
...
</form

Or you can change the colour of the autofill by doing:

input:-webkit-autofill {
    color: #2a2a2a !important;
}

Note, there is a bug being tracked for this to work again: http://code.google.com/p/chromium/issues/detail?id=46543

This is a WebKit behavior.

Answer 3

I've got a solution if you want to prevent the autofill from google chrome but its a little bit "machete" , just remove the class that google chrome adds to those inputs fields and set the value to "" if you dont need to show store data after load.

$(document).ready(function () {
    setTimeout(function () {
            var data = $("input:-webkit-autofill");
            data.each(function (i,obj) {
            $(obj).removeClass("input:-webkit-autofill");
                    obj.value = "";
            });
    },1);           
});

Answer 4

Simple, just add,

    autocomplete="new-password"

to the password field.

Answer 5

In addition to this:

input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

You might also want to add

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

Other wise, when you click on the input, the yellow color will come back. For the focus, if you are using bootstrap, the second part is for the border highlighting 0 0 8px rgba(82, 168, 236, 0.6);

Such that it will just look like any bootstrap input.

Answer 6

I have a pure CSS solution which uses CSS Filters.

filter: grayscale(100%) brightness(110%);

The grayscale filter replaces the yellow with grey, then the brightness removes the grey.

SEE CODEPEN