您现在的位置:首页 > >

去掉chorme浏览器自动补全时input框的背景样式

发布时间:

默认情况下,浏览器会记录用户网页上提交的输入框信息,这使得浏览器能够提供自动补全的功能,尤其是强大的chorme浏览器。
但是吧,chorme自动补全后input框背景颜色变成了淡蓝色,填充就填充吧,但这个样式也忒难看了,如下图:


在控制台查到如下的默认样式


于是尝试了以下方法:


重写input:-internal-autofill-selected的样式(结果没用?)

input:-internal-autofill-selected {
background: #fff !important;
}

重写input:-webkit-autofill(也没用?)
可能默认的样式优先级高到important都起不了作用吧。autocomplete="off" 居然也没用??,还是有自动补全

那就来个曲线救国吧


    通过设置自动补全元素的内阴影把原本的淡蓝色覆盖掉(输入框不至于那么高吧,999px肯定够用了)

input:-webkit-autofill {
box-shadow: 0 0 0px 999px rgba(255, 255, 255, 1) inset !important;
}

    既然自动补全的会有背景颜色的变化,那就给这个颜色变化加个动画效果,延迟到很久很久以后触发并且好长好长时间过渡完(应该不会有人等这么久吧)

input:-webkit-autofill {
-webkit-transition-delay: 99999s;
-webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}

经过测试,以上2个方法都是可行的????。



在尝试以上方法时,我也尝试过设置autocomplete=“off”,但是并没用禁用掉自动补全,于是查了一下MDN:


虽然说可以通过如下方式,可以在表单或者输入框上设置autocompleteoff来禁用掉自动补全:


// 整个表单都禁用自动补全


// 表单中某个元素禁用自动补全





热文推荐
猜你喜欢
友情链接: