Google Chrome automatically solve the discoloration problem filling

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/suo082407128/article/details/97662262

Method a: remove color

input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active { 
   -webkit-transition-delay: 9999s; 
   -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

I only had

input:-webkit-autofill{
   -webkit-transition-delay: 9999s;
   -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

Understood as a set delay distortion and deformation process is very long, so the background color to be displayed is a long process, if it has been fixed on the page, it will eventually show up

Method Two: Set your own color

input:-webkit-autofill{
    box-shadow: 0 0 0px 1000px #000 inset !important;
    -webkit-text-fill-color: #fff !important;   //字体颜色
}

Yes, you read that right, a box-shadow, background is invalid

 

Finishing easy, thanks to a reward ~~~~~