A way to make autofilled inputs background transparent

Consider the following form

There’s an issue with that form - If it’s filled with chrome-stored credentials - it looks like this

Here’s the selector for autofilled input: input:-webkit-autofill

It’s possible to change color of this box, like this:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
  -webkit-box-shadow: 0 0 0 30px red inset;
}

But this method is not useful, if you want to make the background transparent.

However there’s a way (or rather workaround) to make it transparent, like this:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
  transition: background-color 5000s;
  -webkit-text-fill-color: #fff !important;
}

This is basically equivalent to transparent background, unless you’ll wait really long for the animation to complete ;)

Tweet