删除Chrome自动填充的输入背景颜色？
在我正在处理的表单上，Chrome会自动填写电子邮件和密码字段。 这很好，但Chrome会将背景颜色更改为淡黄色。
我正在设计的设计是在黑色背景上使用浅色文字，所以这真的会弄乱了表单的外观 – 我有鲜明的黄色框和几乎看不见的白色文字。 一旦领域重点，领域恢复正常。
是否有可能停止Chrome改变这些领域的颜色？
这工作正常，您可以更改输入框样式以及输入框内的文本样式：
在这里你可以使用任何颜色，例如white ， #DDD ， rgba(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; }
