On a form I\'m working on, Chrome is auto-filling the email and password fields. This is fine, however, Chrome changes the background colour to a pale yellow colour.
This will work for input, textarea and select in normal, hover, focus and active states.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
{
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
Here is SCSS version of the above solution for those who are working with SASS/SCSS.
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
&, &:hover, &:focus, &:active
{
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
}