Google Chrome自动填充并显示黄色背景

Google Chrome的devise问题及其表单自动填充function。 如果Chrome记得某些login名/密码,它会将背景颜色更改为黄色。

以下是一些截图:

替代文字替代文字

如何删除该背景或只是禁用此自动填充?

改变“白”到任何你想要的颜色。

input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset !important; } 

解决方法:

 if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $(window).load(function(){ $('input:-webkit-autofill').each(function(){ var text = $(this).val(); var name = $(this).attr('name'); $(this).after(this.outerHTML).remove(); $('input[name=' + name + ']').val(text); }); }); } 

如果你们想要透明的input字段,你可以使用转换和转换延迟。

 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition-delay: 9999s; -webkit-transition: color 9999s ease-out, background-color 9999s ease-out; } 

在Firefox中,您可以使用autocomplete =“off / on”属性来禁用表单上的所有自动完成function。 同样,可以使用相同的属性设置各个项目的自动完成。

 <form autocomplete="off" method=".." action=".."> <input type="text" name="textboxname" autocomplete="off"> 

你可以在Chrome中testing它,因为它应该工作。

如果要保留自动填充以及附加到input元素的任何数据,附加处理程序和function,请尝试以下脚本:

 if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { var _interval = window.setInterval(function () { var autofills = $('input:-webkit-autofill'); if (autofills.length > 0) { window.clearInterval(_interval); // stop polling autofills.each(function() { var clone = $(this).clone(true, true); $(this).after(clone).remove(); }); } }, 20); } 

它轮询,直到find任何自动填充元素,克隆它们包括数据和事件,然后插入到相同的位置的DOM,并删除原来的。 一旦find任何克隆,就停止轮询,因为自动填充有时会在页面加载后花费一秒。 这是以前的代码示例的变体,但更健壮,尽可能保持尽可能多的function。

(确认在Chrome,Firefox和IE 8中工作)

以下CSS将删除黄色背景色,并用您select的背景色replace它。 它不禁用自动填充,它不需要jQuery或JavaScript的黑客。

 input:-webkit-autofill { -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */ -webkit-text-fill-color: #333; } input:-webkit-autofill:focus { -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset; -webkit-text-fill-color: #333; } 

从以下位置复制的解决scheme: 用HTML / CSS覆盖浏览器表单填充和input高亮显示

为我工作,只需要更改CSS。

 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important; } 

你可以把任何颜色代替#ffffff

这解决了Safari和Chrome上的问题

 if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){ window.setInterval(function(){ $('input:-webkit-autofill').each(function(){ var clone = $(this).clone(true, true); $(this).after(clone).remove(); }); }, 20); } 

有点哈克,但为我完美的作品

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

这是Jason's的MooTools版本。 修复它在Safari也。

 window.addEvent('domready',function() { $('username').focus(); if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0)) { var _interval = window.setInterval(function () { var autofills = $$('input:-webkit-autofill'); if (autofills.length > 0) { window.clearInterval(_interval); // stop polling autofills.each(function(el) { var clone = el.clone(true,true).inject(el,'after');; el.dispose(); }); } }, 20); } }); 

这帮了我一个CSS的版本。

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

白色可以是任何你想要的颜色。

我用这个,

 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; } input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; } /* You can use color:#color to change the color */ 

答案的组合为我工作

 <style> input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important; -webkit-text-fill-color: white !important; } </style> 

在您的标签中,只需插入这一小段代码即可。

 autocomplete="off" 

但是,请不要将其放在用户名/电子邮件/ idname字段中,因为如果您仍然在使用自动填充function,则会禁用该字段。 但是我find了一个解决方法,只需将代码放在密码input标签中,因为您永远不会自动填充密码。 此修补程序应该删除您的电子邮件/用户名字段上的颜色力,matinain自动填充function,并且可以避免像Jquery或JavaScript这样笨重的黑客入侵。

如果你想完全摆脱它,我已经调整了以前的答案中的代码,所以它在hover,活动和重点:

 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px white inset; } 

这是一个和Alessandro一样的Mootools解决scheme – 用新的replace每个受影响的input。

 if (Browser.chrome) { $$('input:-webkit-autofill').each(function(item) { var text = item.value; var name = item.get('name'); var newEl = new Element('input'); newEl.set('name', name); newEl.value = text; newEl.replaces(item); }); } 

那解决scheme呢?

 if ($.browser.webkit) { $(function() { var inputs = $('input:not(.auto-complete-on)'); inputs.attr('autocomplete', 'off'); setTimeout(function() { inputs.attr('autocomplete', 'on'); }, 100); }); } 

它会closures自动填充和自动填充(使黄色背景消失),等待100毫秒,然后自动完成function返回而不自动填充。

如果你有需要自动填充的input,然后给他们auto-complete-on CSS类。

没有解决scheme为我工作,用户名和密码input仍然填充,并给黄色的背景。

于是我问自己,“Chrome如何确定在给定页面上应该自动填充的内容?”

“它是否查找inputID,input名称?表单id?表单操作?

通过对用户名和密码input的实验,我发现只有两种方式会导致Chrome无法find应该自动填充的字段:

1)将密码input放在文本input的前面。 2)给他们相同的名称和ID …或没有名字和ID。

加载页面后,使用JavaScript,您可以更改页面上的input的顺序,或dynamic地给他们的名字和ID …

而Chrome不知道什么命中…自动完成保持closures。

疯狂的黑客,我知道。 但它为我工作。

Chrome 34.0.1847.116,OSX 10.7.5

唯一的方法是对我有用:(需要jQuery)

 $(document).ready(function(e) { if ($.browser.webkit) { $('#input_id').val(' ').val(''); } }); 

我解决了这个问题的密码字段,我有这样的:

将inputtypes设置为文本而不是密码

用jQuery删除input的文本值

使用jQuery将inputtypes转换为密码

 <input type="text" class="remove-autofill"> $('.js-remove-autofill').val(''); $('.js-remove-autofill').attr('type', 'password'); 

Arjans解决scheme的更新。 当试图改变它不会让你的价值。 这对我来说很好。 当你专注于一个input,然后它会变黄。 它足够接近。

 $(document).ready(function (){ if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){ var id = window.setInterval(function(){ $('input:-webkit-autofill').each(function(){ var clone = $(this).clone(true, true); $(this).after(clone).remove(); }); }, 20); $('input:-webkit-autofill').focus(function(){window.clearInterval(id);}); } }); $('input:-webkit-autofill').focus(function(){window.clearInterval(id);}); 

试试这个代码:

  $(function(){ setTimeout(function(){ $('[name=user_password]').attr('type', 'password'); }, 1000); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <input name="user_password" type="password"> 

fareed namrouti答案是正确的。 但是当selectinput时,背景仍然变黄。 添加!important的问题解决。 如果你还想textareaselect相同的行为,只需添加textarea:-webkit-autofill, select:-webkit-autofill

只有input

 input:-webkit-autofill { background-color: rgb(250, 255, 189) !important; } 

input,select,textarea

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189) !important; } 

添加autocomplete="off"不会削减它。

将inputtypes属性更改为type="search"
Google不会将自动填充应用于具有searchtypes的input。

希望这可以为你节省一些时间。

最终的解决scheme:

 $(document).ready(function(){ var contadorInterval = 0; if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { var _interval = window.setInterval(function () { var autofills = $('input:-webkit-autofill'); if (autofills.length > 0) { window.clearInterval(_interval); // stop polling autofills.each(function() { var clone = $(this).clone(true, true); $(this).after(clone).remove(); setTimeout(function(){ // $("#User").val(''); $("#Password").val(''); },10); }); } contadorInterval++; if(contadorInterval > 50) window.clearInterval(_interval); // stop polling }, 20); }else{ setTimeout(function(){ // $("#User").val(''); $("#Password").val(''); },100); } }); 
 <input type="text" name="foo" autocomplete="off" /> 

类似的问题: 链接

您好使用这个代码。

  <input type="email" id="email" name="email" class="form-control" onfocus="this.removeAttribute('readonly');" readonly data-error=".errorTxt1"> 

刚刚发现自己有同样的问题。 这适用于我:

 form :focus { outline: none; }