如何去除webkit浏览器默认填充表单的样式

在开发后台管理系统网站时，在webkit内核和谷歌浏览器里访问网页中的表单时，记住密码的表单文本框背景色会自动填充为黄色，如下图。本文将介绍解决该问题的两种方式。

chrome浏览器默认填充样式

通过检查元素会发现，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;

}

作者：再见那卑微的再见
链接：https://www.jianshu.com/p/b400e5d0b4cd