禁用chrome自动填充用户名密码

为了方便用户,各种浏览器会对网页做一些自认为“smart”的优化,谷歌也不例外

但是,这种优化,再某些时候会给前端带来一堆的问题,就比如说这个自动填充用户名密码

禁用自动填充:

标准写法:

input添加autocomplete=”off”属性//chrome不支持

chrome兼容:

在表单顶部写一个隐藏的容器(form标签内部)


<div style="display:none">
    <input type="text" value="" />
    <input type="password" value="" />
</div>

另外,自动填充还会带来一个样式的问题:chrome会把自认为是用户名密码的表单,设置成黄色背景

form

通过chrome自带开发者工具,我们可以看到这个input的样式表里多了一个伪类的样式

user agent

看到这个,我们就放心了,原来只不过是一条css样式,so,我们只要自己写一行样式规则,来覆盖掉user agent里的样式规则,那就可以了呗~

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {background-color: transparent!important;background-image: none;color: rgb(0, 0, 0);}

然而,我们想的太简单了,我们甚至给这个样式加了一个important,chrome也承认了我们设置的样式优先级要更高,但最后chrome还是忽略了我们写的样式,固执的坚持自己的背景色

computed

这简直是 无耻!

对于这样的事,前端的小伙伴还是没有放弃斗争,于是,各路大神总结出了下面的写法

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

参考:https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/

禁用chrome自动填充用户名密码

发表评论

电子邮件地址不会被公开。 必填项已用*标注