解决谷歌浏览器自动填充变色问题

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/suo082407128/article/details/97662262

方法一：去掉颜色

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

我只用了

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

理解为设置了一个延时变形，并且变形过程也极长，这样背景色要显示出来就是一个漫长的过程了，如果在页面一直不动，最终还是会显示出来的

方法二：自己设置颜色

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

是的，你没看错，是box-shadow，background是无效的

整理不易，感谢打赏~~~~~