去除chrome浏览器自动添加的默认样式

chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}
denglu
对于这种情况,我想过各种css方法去覆盖,用最高级!inportant,但都没有起到作用覆盖不掉,如果遇到同样问题的小伙伴,下面我提供了两种解决的方案

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

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #1a3f43 inset;//修改背景颜色
-webkit-text-fill-color: #ccc;//修改文字颜色
}

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

if (navigator.userAgent.toLowerCase().indexOf(“chrome”) >= 0)
{
var _interval = window.setInterval(function () {
var autofills = $(‘input:-webkit-autofill’);
if (autofills.length > 0) {
window.clearInterval(_interval); // 停止轮询
autofills.each(function() {
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}
}, 20);
}

最后的效果:登录图片

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » 去除chrome浏览器自动添加的默认样式

点赞

发表评论

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