Chrome Autofill CSS

July 26, 2022

I successfully changed Chrome’s input Autofill styling to transparent (however) this only works as you type into the input field.

If you select one of the autofill options to populate the field then the input color becomes an opaque white and you can’t see behind it. I cant the CSS that is doing this either. 🧐

Here is a codePen if you want to take a look.
https://codepen.io/jinch/pen/wvmrGGJ?editors=1100

Is there any way to keep this field transparent (at all times)? Any suggestions appreciated.

Cheers.

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 50px white inset;
    transition: background-color 5000s ease-in-out 0s !important;
}

input {
    background-color: #eee !important;
}

>Solution :

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

Just this code should be work.