删除Chrome自动填充的输入背景颜色?

在我正在处理的表单上,Chrome会自动填写电子邮件和密码字段。 这很好,但Chrome会将背景颜色更改为淡黄色。

我正在设计的设计是在黑色背景上使用浅色文字,所以这真的会弄乱了表单的外观 – 我有鲜明的黄色框和几乎看不见的白色文字。 一旦领域重点,领域恢复正常。

是否有可能停止Chrome改变这些领域的颜色?

这工作正常,您可以更改输入框样式以及输入框内的文本样式:

在这里你可以使用任何颜色,例如white#DDDrgba(102, 163, 177, 0.45) #DDD rgba(102, 163, 177, 0.45)

transparent不会在这里工作。

 /* Change the white to any color ;) */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px white inset; } 

另外,您可以使用它来更改文字颜色:

 /*Change text in autofill textbox*/ input:-webkit-autofill { -webkit-text-fill-color: yellow !important; } 

建议:不要在数百或数千中使用过多的模糊半径。 这没有任何好处,可能会把处理器负载放在较弱的移动设备上。 (对于实际的阴影也是如此)。 对于一个20px高度的普通输入框,30px的“模糊半径”将完全覆盖它。

我有一个更好的解决方案。

将背景设置为下面的其他颜色并不能解决问题,因为我需要一个透明的输入字段

 -webkit-box-shadow: 0 0 0px 1000px white inset; 

所以我尝试了一些其他的东西,我想出了这个:

 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; } 

以前的解决方案是添加一个盒子阴影,对于需要纯色背景的人来说,效果很好。 增加一个转换的另一个解决方案是工作的,但是必须设置一个持续时间/延迟将意味着在某一时刻它可能再次显示。

我的解决方案是使用关键帧,而这样,它将始终显示您选择的颜色。

 @-webkit-keyframes autofill { to { color: #666; background: transparent; } } input:-webkit-autofill { -webkit-animation-name: autofill; -webkit-animation-fill-mode: both; } 

这已经被设计,因为这个着色行为已经从WebKit。 它允许用户了解数据已被预填充。 错误1334

您可以通过执行(或在特定的表单控件上关闭自动完成功能:

 <form autocomplete="off"> ... </form 

或者,您可以通过执行以下操作更改自动填充的颜色:

 input:-webkit-autofill { color: #2a2a2a !important; } 

请注意,有一个错误正在追踪这个工作: http : //code.google.com/p/chromium/issues/detail?id=46543

这是一个WebKit行为。

这是我的解决方案,我使用过渡和转换延迟,因此我可以在我的输入字段上有一个透明的背景。

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

目前可能的解决方法是在阴影中设置“强”

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

试试这个隐藏自动填充样式

 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus { background-color: #FFFFFF !important; color: #555 !important; -webkit-box-shadow: 0 0 0 1000px white inset !important; -webkit-text-fill-color: #555555 !important; } 

所有上述的答案工作,但确实有他们的错误。 下面的代码是上述两个答案的合并,完美地工作,不闪烁。

 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-box-shadow: 0 0 0px 1000px #fff inset; } 

上海社会科学院

 input:-webkit-autofill &, &:hover, &:focus, &:active transition-delay: 9999s transition-property: background-color, color 

经过两个小时的搜索似乎谷歌仍然覆盖黄色不知何故,但我为它的修复。 那就对了。 它将工作悬停,重点等。 所有你需要做的就是添加!重要的。

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

这将完全消除输入字段中的黄色

如果你想保持自动完成功能不变,你可以使用一些jQuery删除Chrome的样式。 我在这里写了一篇关于它的短文: http : //www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

 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:-webkit-autofill{ -webkit-box-shadow: 0 0 0px 1000px white inset; } 

您可能还想添加

 input:-webkit-autofill:focus{ -webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6); } 

另外,当你点击输入时,黄色将会回来。 对于焦点,如果您使用引导,第二部分是边界突出显示0 0 8px rgba(82,168,236,0.6);

这样它就会看起来像任何引导输入。

我有一个问题,我不能使用box-shadow,因为我需要输入字段是透明的。 这是一个黑客,但纯粹的CSS。 将转换设置为很长一段时间。

 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s; } 

我已经开发了另一种使用JavaScript而不使用JQuery的解决方 如果您觉得这个有用,或者决定重新发布我的解决方案,我只会要求您提供我的名字。 请享用。 – 丹尼尔·费尔韦瑟

 var documentForms = document.forms; for(i = 0; i < documentForms.length; i++){ for(j = 0; j < documentForms[i].elements.length; j++){ var input = documentForms[i].elements[j]; if(input.type == "text" || input.type == "password" || input.type == null){ var text = input.value; input.focus(); var event = document.createEvent('TextEvent'); event.initTextEvent('textInput', true, true, window, 'a'); input.dispatchEvent(event); input.value = text; input.blur(); } } } 

此代码基于这样一个事实:只要输入其他文本,Google Chrome就会删除Webkit样式。 简单地改变输入字段值是不够的,Chrome想要一个事件。 通过关注每个输入字段(文本,密码),我们可以发送键盘事件(字母“a”),然后将文本值设置为之前的状态(自动填充文本)。 请记住,这段代码将在每个浏览器中运行,并会检查网页中的每个输入字段,根据您的需要进行相应调整。

对于那些正在使用指南针的人:

 @each $prefix in -webkit, -moz { @include with-prefix($prefix) { @each $element in input, textarea, select { #{$element}:#{$prefix}-autofill { @include single-box-shadow(0, 0, 0, 1000px, $white, inset); } } } } 

试试这个:与上面的@ Nathan-white答案一样,只需稍作调整即可。

 /* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: all 5000s ease-in-out 0s; transition-property: background-color, color; } 

我有一个解决方案,如果你想防止自动填充谷歌浏览器,但它的一点点“大砍刀”,只是删除谷歌浏览器添加到这些输入字段的类,并将值设置为“”,如果你不需要显示加载后存储数据。

 $(document).ready(function () { setTimeout(function () { var data = $("input:-webkit-autofill"); data.each(function (i,obj) { $(obj).removeClass("input:-webkit-autofill"); obj.value = ""; }); },1); }); 

Daniel Fairweather的解决方案( 去除Chrome自动完成的输入背景颜色? )(我很想upvote他的解决方案,但仍然需要15代表)的作品真的很好。 与最上面的解决方案有很大的区别:你可以保留背景图片! 但有一点修改(只需Chrome检查)

你需要记住, 它只能在可见的领域工作

因此,如果您使用$ .show()作为表单,则需要在show()事件之后运行此代码

我的完整解决方案(我有一个显示/隐藏按钮登录窗体):

  if (!self.isLoginVisible()) { var container = $("#loginpage"); container.stop(); self.isLoginVisible(true); if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { var documentForms = document.forms; for (i = 0; i < documentForms.length; i++) { for (j = 0; j < documentForms[i].elements.length; j++) { var input = documentForms[i].elements[j]; if (input.type == "text" || input.type == "password" || input.type == null) { var text = input.value; input.focus(); var event = document.createEvent('TextEvent'); event.initTextEvent('textInput', true, true, window, 'a'); input.dispatchEvent(event); input.value = text; input.blur(); } } } } } else { self.hideLogon(); } 

对不起,我宁愿它是一个评论。

如果你愿意,我可以把一个链接到我使用它的网站。

谢谢Benjamin!

Mootools解决方案有点棘手,因为我不能通过使用$('input:-webkit-autofill')来获取字段,所以我使用的是以下内容:

 if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { window.addEvent('load', function() { setTimeout(clearWebkitBg, 20); var elems = getElems(); for (var i = 0; i < elems.length; i++) { $(elems[i]).addEvent('blur', clearWebkitBg); } }); } function clearWebkitBg () { var elems = getElems(); for (var i = 0; i < elems.length; i++) { var oldInput = $(elems[i]); var newInput = new Element('input', { 'name': oldInput.get('name'), 'id': oldInput.get('id'), 'type': oldInput.get('type'), 'class': oldInput.get('class'), 'value': oldInput.get('value') }); var container = oldInput.getParent(); oldInput.destroy(); container.adopt(newInput); } } function getElems() { return ['pass', 'login']; // ids } 

我放弃!

由于无法使用自动完成功能更改输入的颜色,因此我决定使用jQuery for webkit浏览器禁用所有这些选项。 喜欢这个:

 if (/webkit/.test(navigator.userAgent.toLowerCase())) { $('[autocomplete="on"]').each(function() { $(this).attr('autocomplete', 'off'); }); } 

没有解决方案为我工作,插入阴影将无法为我工作,因为输入有一个半透明的背景叠加在页面背景。

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

“它是否查找输入ID,输入名称?表单id?表单操作?

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

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

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

而Chrome不知道是什么命中它…自动完成已损坏!

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

Chrome 34.0.1847.116,OSX 10.7.5

不幸的是,严格地说,上述解决方案在2016年并没有为我工作(问题几年之后)

所以这里是我使用的积极的解决方案:

 function remake(e){ var val = e.value; var id = e.id; e.outerHTML = e.outerHTML; document.getElementById(id).value = val; return true; } <input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)"> 

基本上,它在保存值的同时删除标签,并重新创建它,然后放回该值。

这家伙有一个很好的解决方案使用JS和完美的作品。

如前所述,插入-webkit-box-shadow对我来说效果最好。

 /* Code witch overwrites input background-color */ input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset; } 

还有代码片段来改变文字颜色:

 input:-webkit-autofill:first-line { color: #797979; } 

简单,只需添加,

  autocomplete="new-password" 

到密码字段。

我知道OP只想改变输入字段,但用它来设置一个自动完成覆盖所有常见的字段类型。

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-animation-name: autofill; -webkit-animation-fill-mode: both; } @-webkit-keyframes autofill { to { color: #000; background: transparent; } } 

这是这个任务的复杂解决方案。

 (function($){ if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $('input, select').on('change focus', function (e) { setTimeout(function () { $.each( document.querySelectorAll('*:-webkit-autofill'), function () { var clone = $(this).clone(true, true); $(this).after(clone).remove(); updateActions(); }) }, 300) }).change(); } var updateActions = function(){};// method for update input actions updateActions(); // start on load and on rebuild })(jQuery) 
 *:-webkit-autofill, *:-webkit-autofill:hover, *:-webkit-autofill:focus, *:-webkit-autofill:active { /* use animation hack, if you have hard styled input */ transition: all 5000s ease-in-out 0s; transition-property: background-color, color; /* if input has one color, and didn't have bg-image use shadow */ -webkit-box-shadow: 0 0 0 1000px #fff inset; /* text color */ -webkit-text-fill-color: #fff; /* font weigth */ font-weight: 300!important; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="name" autocomplete="name"/> <input type="email" name="email" autocomplete="email"/> 

使用这个,并检查你的问题已经解决

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

谷歌浏览器的用户代理阻止开发人员的CSS ,所以要改变autofill用户界面必须使用这样的另一个属性:

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important; /*use inset box-shadow to cover background-color*/ -webkit-text-fill-color: #ffa400 !important; /*use text fill color to cover font color*/ } 

对不起,错在哪里,但是对于HTML5的搜索栏来说,一个纯粹的Css解决方案,我不知道它是否是非常好的标准练习,但是你可以把搜索的webkit外观改为一个按钮,然后按照你想要的样式进行设置。

 input[type=search]{ -webkit-appearance:button; }