如何去除webkit浏览器默认填充表单的样式-原创手记-慕课网

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

webp

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