chrome浏览器自动填充表单时出现黄色背景高亮(#FAFFBD)....问题未解决完全
自动填表功能 -autocomplete : (默认为on,关闭提示选择off),
阻止html自动填充,在表单标签中设置 autocomplete="off",即可,但在chrome不起作.
<input type="text" placeholder="邮箱" id="username" value="" autocomplete="off"/>
由于background-color属于chrome私有属性,无法覆盖,(除此外还有background-image和color都是不能修改的私有属性),chorme中其他属性可用(!import)提高优先级,覆盖私有属性
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189); /* #FAFFBD; */
background-image: none;
color: rgb(0, 0, 0);
}
解决的方法有--
网上的方法1:添加一个可隐藏的input,让它充当自动填充的对象,但部分解决不
<input style="display:none">
网上的方法2:如果input是单色背景,可用内阴影填,视觉上效果和background-color相似,不覆盖私有属性background的,但是对于透明背景或不是纯色的可用度低
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-text-fill-color: #333; }
网上的方法3:使用js,在load时处理input,但是只有在登录时处理,自动填充
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $(window).load(function(){ $('input:not(input[type=submit])').each(function(){ var outHtml = this.outerHTML; $(this).append(outHtml); }); }); }