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

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

以下是一些截图：

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

Answer 1

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

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

Answer 2

解决方法：

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

Answer 3

如果你们想要透明的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; } 

Answer 4

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

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

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

Answer 5

如果要保留自动填充以及附加到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中工作）

Answer 6

以下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高亮显示

Answer 7

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

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

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

Answer 8

这解决了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); } 

Answer 9

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

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

Answer 10

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

Answer 11

这帮了我一个CSS的版本。

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

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

Answer 12

我用这个，

 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 */ 

Answer 13

答案的组合为我工作

 <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> 

Answer 14

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

 autocomplete="off" 

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

Answer 15

如果你想完全摆脱它，我已经调整了以前的答案中的代码，所以它在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; } 

Answer 16

这是一个和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); }); } 

Answer 17

那解决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类。

Answer 18

没有解决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

Answer 19

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

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

Answer 20

我解决了这个问题的密码字段，我有这样的：

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

用jQuery删除input的文本值

使用jQuery将inputtypes转换为密码

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

Answer 21

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

Answer 22

试试这个代码：

  $(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"> 

Answer 23

fareed namrouti答案是正确的。 但是当selectinput时，背景仍然变黄。 添加!important的问题解决。 如果你还想textarea和select相同的行为，只需添加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; } 

Answer 24

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

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

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

Answer 25

最终的解决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); } }); 

Answer 26

 <input type="text" name="foo" autocomplete="off" /> 

类似的问题： 链接

Answer 27

您好使用这个代码。

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

Answer 28

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

 form :focus { outline: none; }