chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式

最新推荐文章于 2023-08-22 16:22:17 发布

JeffYL

最新推荐文章于 2023-08-22 16:22:17 发布

阅读量1k

点赞数 1

文章标签： chrome css

很多朋友都遇到这个问题：当使用chrome浏览器表单自动填充时都会自动添加默认的样式.
发现该问题的原因-是在写账号登录页面时，input表单添加了背景图片，当自动填充，搓搓的一坨淡黄色背景出来。如果把这个图标放在input表单外面，就不会出现这个问题。
通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

<span style="font-family:SimSun;font-size:14px;">input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}</span>

在有些情况下，这个黄色的背景会影响到我们界面的效果，尤其是在我们给input文本框使用图片背景的时候，原来的圆角和边框都被覆盖了：

思路有两个，1、通过打补丁，修复bug。2、关闭浏览器自带填充表单功能

思路一：打补丁

情景一：input文本框是纯色背景的

可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景；如：

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
}

如果你有使用圆角等属性，或者发现输入框的长度高度不太对，可以对其进行调整，除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级，如：

<span style="font-family:SimSun;font-size:14px;">input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
height: 27px!important;
line-height: 27px!important;
border-radius: 0 4px 4px 0;
}</span>

情景二：input文本框是使用图片背景的

这个比较麻烦，目前还没找到完美的解决方法，有两种选择：

1、如果你的图片背景不太复杂，只有一些简单的内阴影，那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景，此时只不过是没有了原来的内阴影效果罢了。

2、如果你实在想留住原来的内阴影效果，那就只能牺牲chrome自动填充表单的功能，使用js去实现，例如：

<span style="font-family:SimSun;font-size:14px;">$(function() {
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('ul input:not(input[type=submit])').each(function(){
var outHtml = this.outerHTML;
$(this).append(outHtml);
});
});
}
});</span>

3.如果不想多去处理chrome浏览器下表单自动填充出现的添加默认样式，那就把这个小小的图标放到表单外面吧，我这个因为是input框

只有border-bottom，如果这个input框有边框，那么可能需要使用一个div的边框的来假装成input框的边框，然后input框弄成是没有边框的。