chrome input 自动填充

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); }); }); }