删除自动完成Chrome输入背景颜色？

这是因为这种着色行为来自WebKit而设计的。它允许用户了解数据已预填充。错误1334

您可以通过执行（或在特定表单控件上）关闭自动完成：

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

或者，您可以通过以下操作更改自动填充的颜色：

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

请注意，有一个bug被跟踪以使其再次工作：http://code.google.com/p/chromium/issues/detail?id=46543

这是一个WebKit行为。

如果你想保持自动完成功能不变，你可以使用一些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);});});}

谢谢本杰明！

Moools的解决方案有点棘手，因为我无法使用$('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}

我已经开发了另一个使用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();}}}

这段代码基于这样一个事实，即GoogleChrome在输入额外文本后立即删除Webkit样式。简单地更改输入字段值是不够的，Chrome想要一个事件。通过关注每个输入字段（文本，密码），我们可以发送一个键盘事件（字母'a'），然后将文本值设置为它的先前状态（自动填充文本）。请记住，这段代码将在每个浏览器中运行，并将检查网页中的每个输入字段，根据您的需要相应地调整它。

这可能有点晚了，但对于未来的参考，Olly Hodgons在这里展示了一个仅限CSS的解决方案http://lostmonocle.com/post/1479126030/fixing-the-chrome-autocomplete-background-colour

您所要做的就是添加另一个选择器来覆盖默认输入字段设置所以使用而不是

input:-webkit-autofill {background-color: #FAFFBD !important;}

有些像

#login input:-webkit-autofill {background-color: #ff00ff;}

或

form input:-webkit-autofill {background-color: #f0f;}

这似乎对我很有效。

目前可能的解决方法是设置一个“强大”的内部阴影：

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框内的文本样式：

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

但是transparent在这里不起作用。

/* Change the white to any color */input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow: 0 0 0 30px white inset !important;}

此外，您可以使用它来更改文本颜色：

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

忠告：不要使用数百或数千的过度模糊半径。这没有任何好处，可能会将处理器负载放在较弱的移动设备上。（对于实际的外部阴影也是如此）。对于20px高度的正常输入框，30px的模糊半径将完美覆盖它。

如前所述，inset-webkit-box-阴影对我来说效果最好。

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

我放弃！

由于无法使用自动完成更改输入的颜色，我决定使用jQuery为webkit浏览器禁用所有这些。像这样：

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

丹尼尔·费尔韦瑟（删除自动完成Chrome输入背景颜色？）的解决方案（我很想支持他的解决方案，但仍然需要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();}

再次道歉，我更希望这是一个评论。

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

没有一个解决方案适合我，插入阴影不适合我，因为输入有一个半透明的背景覆盖在页面背景上。

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

“它是否查找输入ID、输入名称？表单ID？表单操作？”

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

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

页面加载后，使用javascript，您可以动态更改页面上输入的顺序，或者动态为它们提供名称和ID…

Chrome不知道是什么击中了它……自动完成坏了！

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

Chrome

两年后线程的复活。我在这个问题上工作了大约几天，发现了一个简单的技巧来防止这个丑陋的自动完成功能：

只需添加一个随机字符串即可形成像<form action="site.com/login.php?random=123213">这样的目标

它适用于最新的chrome版本34.0.1847.137

更新：如果它不起作用，给像<form id="test" action="xxx://">这样的动作提供奇怪的协议，然后用javascript填充这个区域：

$('#test').attr('action', 'http://example.site/login.php');

更新2：仍然有问题，我决定完全删除<form>标签并通过jQuery发布变量。

除此之外：

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

另一方面，当你点击输入时，黄色会回来。对于焦点，如果您使用bootstrap，第二部分用于边框高亮显示0 0 8px rgba（82,168,236,0.6）；

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

对于那些使用Compass的人：

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

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

将背景设置为另一种颜色并没有为我解决问题，因为我需要一个透明的输入字段

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

上述所有答案都有效，但确实有它们的错误。下面的代码是上述两个答案的合并，它们完美地工作，没有闪烁。

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

试试这个：与上面@内森-怀特的答案相同，只是略有调整。

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

SASS

input:-webkit-autofill
&,&:hover,&:focus,&:activetransition-delay: 9999stransition-property: background-color, color

尝试隐藏自动填充样式

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

我遇到了一个问题，我不能使用box阴影，因为我需要输入字段是透明的。这有点黑客，但纯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;}

以前的添加框阴影的解决方案非常适合需要纯色背景的人。添加过渡的另一种解决方案可以工作，但必须设置持续时间/延迟将意味着在某些时候它可能会再次显示。

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

@-webkit-keyframes autofill {0%,100% {color: #666;background: transparent;}}
input:-webkit-autofill {-webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */-webkit-animation-name: autofill;-webkit-animation-fill-mode: both;}

示例代码：https://codepen.io/-Steve-/pen/dwgxPB

不幸的是，上述解决方案在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)">

基本上，它在保存值时删除标记，并重新创建它，然后放回值。

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

(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 actionsupdateActions(); // 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"/>

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

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

简单，只需添加，

    autocomplete="new-password"

到密码字段。

经过2个小时的搜索，似乎谷歌仍然以某种方式覆盖了黄色，但我为它的修复。没错。它也适用于悬停、焦点等。你所要做的就是添加！对它很重要。

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

这将完全从输入字段中删除黄色

使用它并检查您的问题是否已解决

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

谷歌Chrome用户代理阻止开发者CSS，所以为了改变autofill的UI必须使用另一个属性，如下所示：

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

我有一个使用CSS过滤器的纯CSS解决方案。

filter: grayscale(100%) brightness(110%);

灰度滤镜将黄色替换为灰色，然后亮度去除灰色。

见代码

这对我有效：

padding: 5px;background-clip: content-box;

这将适用于输入，文本区域和选择在正常，悬停，焦点和活动状态。

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

这是为那些使用SASS/SCSS的人提供的上述解决方案的SCSS版本。

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

这对我有用。

.input:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;}

添加一个小时的延迟将暂停输入元素上的任何css更改。
这比添加过渡动画或内部阴影更好。

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{transition-delay: 3600s;}

这对我来说可以删除字段的黄色背景：

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,input:-webkit-autofill:valid,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus {-webkit-transition-delay: 99999s;-webkit-text-fill-color:#D7D8CE;}

我们可以使用-webkit-autofill伪选择器来定位这些字段，并按照我们认为合适的方式设置它们的样式。默认样式只影响背景颜色，但大多数其他属性都适用于此，例如边框和字体大小。我们甚至可以使用-webkit-text-fill-color更改文本的颜色，它包含在下面的片段中。

/* Change Autocomplete styles in Chrome*/input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus {border: 1px solid green;-webkit-text-fill-color: green;-webkit-box-shadow: 0 0 0px 1000px #000 inset;transition: background-color 5000s ease-in-out 0s;}

这对我很有效（Chrome76测试）

input:-internal-autofill-selected {background-color: transparent;}

虽然可以在许多答案中找到的解决方案在Chrome中确实有效，但在SafariMac和iOS中不起作用。

Safari需要一个额外的语句-background-clip。

这是适用于不同平台上所有主要浏览器的解决方案的完整代码：

/* Disable autofill highlighting */input:-webkit-autofill {-webkit-text-fill-color: var(--text-input-color) !important;-webkit-box-shadow: 0 0 0 1rem var(--page-background-color) inset !important;background-clip: content-box !important;}

（请用自己的值更改--text-input-color和--page-background-color。）

要在不使用时间延迟的情况下拥有透明的背景（特别是在现代Web应用程序中需要，人们可以停止使用它一段时间并希望界面的可预测行为），请使用：

input:-webkit-autofill {-webkit-background-clip: text;}

body {background: lightblue;}
input {background: transparent;}
input.no-autofill-bkg:-webkit-autofill {-webkit-background-clip: text;}

<input type="text" name="email" /><input type="text" name="email" class="no-autofill-bkg" />

工作在：Chrome83/84.0.4147.89，边缘84.0.522.44

如果你决定重新发布我的解决方案，我只要求你包括我的名字或链接到这个。

input:-webkit-autofill {border: none;border-radius: .3rem;caret-color: #fff; /* Pour le I quand on édite */color: #fff;background: #292a2d;/* webkit autofill */-webkit-text-fill-color: #fff; /* Surcharge la font color d'autofill */-webkit-background-clip: text; /* Supprime le background autofill, utile pour le border radius */box-shadow: 0 0 0 50px #292a2d inset; /* Ajoute un fake background à base d'ombrage aplatit */}

可以改变这个盒子的颜色，就像接受的答案一样。

但是如果你想让背景透明，这种方法就没有用了。但是有一种方法（或者更确切地说是变通方法）可以让它透明，如下所示：

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active  {transition: background-color 5000s;-webkit-text-fill-color: #fff !important;}

这基本上相当于透明背景。

试试这个

input:autofill{filter:none;}

基本上，浏览器只是为自动填充输入添加了自己的过滤器。你的样式在这个下面。

我们有一个场景，其中我们有一个复选框来启用或禁用输入字段。

如果选中复选框，字段将被禁用。一旦复选框未选中，输入字段将被启用。我们可以使用chrome自动填充来填充地址等字段。

在单击返回复选框以发布自动填充时，输入字段被禁用，但Chrome将背景添加到使用自动填充填充的字段中在我的情况下，这些是City，state和zip字段

以保持禁用输入字段的透明度，我必须这样做

input:disabled:-webkit-autofill,input:disabled:-webkit-autofill:hover,input:disabled:-webkit-autofill:focus,input:disabled:-webkit-autofill:active  {transition: background-color 5000s;-webkit-text-fill-color: #fff !important;-webkit-background-clip: text;color: white !important;}

2022年更新

2022年后工作更新：

input:-webkit-autofill,input:-webkit-autofill:focus {transition: background-color 600000s 0s, color 600000s 0s;}input[data-autocompleted] {background-color: transparent !important;}