Removing input background colour for Chrome autocomplete?

autocomplete, google-chrome, input

Solution

You can change input box styles as well as text styles inside `input` box:

Here you can use any color e.g. `white`, `#DDD`, `rgba(102, 163, 177, 0.45)`.

But `transparent` won't work here.

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Additionally, you can use this to change the text color:

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: yellow !important;
}

Advice: Don't use an excessive blur radius in the hundreds or thousands. This has no benefit and might put processor load on weaker mobile devices. (Also true for actual, outside shadows). For a normal input box of 20px height, 30px ‘blur radius’ will perfectly cover it.

Edit 2023: To have both transparency and ability to change background color together:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

Note that transition here does nothing in recent Chrome browsers, it's only a fallback solution for older versions of Chrome.

Problem

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?

Original source

Related problems