chrome浏览器表单自动填充，样式改变---webkit-autofill

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012761510/article/details/79063354

chrome浏览器使用表单自动填充功能后，背景颜色会变为黄色，经查看是-webkit-autofill私有属性的锅。

-webkit-autofill内容：

input:-webkit-autofill, 

textarea:-webkit-autofill, 

select:-webkit-autofill  {

1. background-color: rgb(250, 255, 189);
2. background-image: none;
3. color: rgb(0, 0, 0);

}

上述三条内容的优先级较高，即使！important也无法将其覆盖

百度了下大部分网有的答案

关于background-color，可以使用 -webkit-box-shadow: 0 0 0px 1000px white inset;选取相近颜色将其覆盖，这个要求input是纯背景色的情况

不过，还有一个较好的方法是：

transition: background-color 5000s ease-in-out 0s;

没错，就是使用css3动画将其背景色变化的延迟时间尽可能的延长

关于字体颜色，我们可以使用-webkit-text-fill-color: #fff;来改变

至于，input是背景图片的暂时还没有找到解决的方法，如果以后想到了，会后续补充

终极解决方法，就是关闭浏览器的自动填充功能，这样就不用调样式了

<input type="text" name="username" id="username" autocomplete="off" />