Google Chrome autofill background color change?

Question

I'm trying to get the autofill background color on my inputs changed.

The accepted answers online seem to be something along the lines of:

Removing input background colour for Chrome autocomplete?

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
input:-internal-autofill-selected,
input:-internal-autofill-previewed {
    background-color: white !important;
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

This seems to work accept in one situation, which is when the fields are already auto filled.

Meaning I refresh the browser and the fields are already pre-filled with a username/password.

When I hover over or click in the input the background color changes. However when I do nothing the box-shadow as no effect and it's still set to the default user agent stylesheet.

input:-internal-autofill-selected {
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

I've also tried some random properties with no success.

input:-internal-autofill,
input:-internal-autofill:hover, 
input:-internal-autofill:focus, 
input:-internal-autofill:active,

Chrome Version 77.0.3865.90 (Official Build) (64-bit)

Can't figure out how to override this at all. It's like it's been added at the bottom of the css rules with an important so impossible to override?

Answer 1

Box shadow work for me try below code. You can change the shadow color as per your requirment.

input:-webkit-autofill {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 50px white inset;
}