谷歌Chrome表单自动填充和它的黄色背景

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

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

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

解决方案在这里:

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

下面是一个Mootools解决方案，与Alessandro的解决方案相同——将每个受影响的输入替换为新的输入。

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

如果你想保留自动填充，以及任何数据，附加处理程序和附加到输入元素的功能，试试这个脚本:

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

它轮询直到找到任何自动填充元素，克隆它们(包括数据和事件)，然后将它们插入到相同位置的DOM中，并删除原始元素。一旦它发现任何要克隆的，它就会停止轮询，因为自动填充有时在页面加载后需要一秒钟。这是前面代码样例的一个变体，但是更加健壮，并且尽可能保留了完整的功能。

(已确认可在Chrome、Firefox和ie8中使用。)

在标记中，只需插入这一小行代码。

autocomplete="off"

但是，不要把它放在用户名/电子邮件/idname字段，因为如果你仍然想使用自动完成，它会禁用这个字段。但我找到了一个解决这个问题的方法，简单地把代码放在你的密码输入标签中，因为你永远不会自动完成密码。这个修复应该会移除颜色强制，保持电子邮件/用户名字段的自动完成功能，并让你避免像Jquery或javascript这样的笨重黑客。

我也有同样的问题。这对我来说很管用:

form :focus {
outline: none;
}

这是杰森的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);




}
});

将“白色”改为任何你想要的颜色。

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

这修复了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);
}

那解决方案呢:

if ($.browser.webkit) {
$(function() {
var inputs = $('input:not(.auto-complete-on)');


inputs.attr('autocomplete', 'off');


setTimeout(function() {
inputs.attr('autocomplete', 'on');
}, 100);
});
}

它会关闭自动完成和自动填充(因此黄色背景消失)，等待100毫秒，然后在没有自动填充的情况下将自动完成功能恢复。

如果你有需要自动填充的输入，那么给它们auto-complete-on css类。

下面的CSS删除黄色背景色，并将其替换为您选择的背景色。它不会禁用自动填充，也不需要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;
}

Solution copy from: 使用HTML/CSS重写浏览器表单填充和输入高亮显示 < / p >

最终解决方案:

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

没有一个解决方案对我有效，用户名和密码输入仍然在填充，并给出黄色背景。

所以我问自己，“Chrome如何决定在给定的页面上应该自动填充什么?”

“它会查找输入id、输入名称吗?”表单的id吗?表单动作?”

通过我对用户名和密码输入的实验，我发现只有两种方法会导致Chrome无法找到应该自动填充的字段:

1)将密码输入放在文本输入之前。 2)给他们相同的名字和身份证……或者没有名称和id

页面加载后，用javascript你可以改变页面上输入的顺序，或者动态地给他们他们的名字和id…

Chrome不知道是什么击中了它…自动完成关闭。

疯狂的黑客，我知道。但这对我很有用。

Chrome 34.0.1847.116, OSX 10.7.5

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

类似问题:链接

唯一适合我的方法是:(jQuery要求)

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

我修复了这个问题的密码字段，我有这样:

将输入类型设置为文本而不是密码

使用jQuery删除输入文本值

使用jQuery将输入类型转换为密码

<input type="text" class="remove-autofill">


$('.js-remove-autofill').val('');
$('.js-remove-autofill').attr('type', 'password');

如果你想完全摆脱它，我已经在之前的回答中调整了代码，使它在悬停，激活和聚焦时也能工作:

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

阿尔扬斯解决方案的更新。当试图改变值时，它不会让你。这对我来说很好。当你聚焦于一个输入时，它就会变黄。够近了。

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

这帮助了我，一个CSS唯一的版本。

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

我用这个，

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

试试下面的代码:

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

有点俗气，但对我来说很合适

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

如果你想要透明的输入字段，你可以使用转换和转换延迟。

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

法里德·namrouti答案是正确的。但背景仍然得到黄色时输入被选中。添加!important可以解决这个问题。如果你也想让textarea和select具有相同的行为，只需添加textarea:-webkit-autofill, select:-webkit-autofill

仅输入

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

输入，选择，文本区域

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

添加autocomplete="off"并不能解决问题。

将输入类型属性更改为type="search" 谷歌不应用自动填充输入类型的搜索

希望这能为您节省一些时间。

为我工作，只有css更改需要。

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

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

这些答案的组合对我很管用

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

如果你想避免黄色闪烁，直到你的css被应用，拍打一个过渡的坏男孩像这样:

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
transition: background-color 10s ease-in-out 0s;
}

对我来说唯一有效的解决方法是:

:-webkit-autofill {
-webkit-text-fill-color: #000; /* ok for text, no hack */
transition-property: background-color; /* begin hack for background... */
transition-delay: 100000s; /* ...end hack for background */
}

这个解决方案并不理想，还在等待更好的…