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