在开发后台管理系统网站时，在webkit内核和谷歌浏览器里访问网页中的表单时，记住密码的表单文本框背景色会自动填充为黄色，如下图。本文将介绍解决该问题的两种方式。
通过检查元素会发现，webkit内核的浏览器的表单存在以下默认样式：
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
background-color: rgb(250, 255, 189) !important;
background-image: none !important; color: rgb(0, 0, 0) !important;
}
如果直接通过css覆盖该样式，会发现没有效果。浏览器依旧会使用该默认样式。
解决方法：
1.通过阴影覆盖黄色背景，使用足够大的纯白色阴影效果覆盖黄色背景，代码如下
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
border: 1px solid #fff!important;
border-bottom: 1px solid #f0f0f0!important;
}
2.使用渐变效果
第一点的方法虽然可以解决该问题，但如果你设置了输入框的边框颜色，会发现输入框在刚进入页面的一瞬间存在边框为黑色的情况。所以最好使用时间足够长的渐变效果解决该问题
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;
}
