CODEWITHSUNDEEP
cssgoogle-chromeautofill
user7201898
user7201898

Reputation: 134

Chrome Autofill CSS

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;
}

Upvotes: 1

Views: 2293

Answers (2)

user7201898
user7201898

Reputation: 134

If anyone else is interested - that code above works. The issue was I think self introduced into the CSS. Removing the box-shadow style will fix the issue I was experiencing - -webkit-box-shadow: 0 0 0 50px white inset;

Upvotes: 0

erfan ns
erfan ns

Reputation: 97

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.

Upvotes: 4

Related Questions