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

你可以通过以下方式关闭自动完成功能:

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

或者你可以通过以下方式改变自动填充的颜色:

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

请注意，这里有一个正在跟踪的错误，以便再次工作: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);
    });
});}

谢谢便雅悯!

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
}

我开发了另一个解决方案使用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();
        }
    }
}

This code is based on the fact that Google Chrome removes the Webkit style as soon as additional text is entered. Simply changing the input field value does not suffice, Chrome wants an event. By focusing on each input field (text, password), we can send a keyboard event (the letter 'a') and then set the text value to it's previous state (the auto-filled text). Keep in mind that this code will run in every browser and will check every input field within the webpage, adjust it accordingly to your needs.

这可能有点晚了，但对于未来的参考，有一个CSS唯一的解决方案，Olly Hodgons在这里展示 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;
}

or

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

你可以改变输入框的样式以及输入框内的文本样式:

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

但透明在这里行不通。

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

我放弃!

由于没有办法用自动补全来改变输入的颜色，我决定禁用所有这些webkit浏览器用jQuery。是这样的:

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

Daniel Fairweather的解决方案(移除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)给他们相同的名字和身份证……或者根本没有名字和身份。

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

Chrome不知道是什么击中了它…自动补全功能失效!

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

Chrome 34.0.1807.116, OSX 10.7.5

两年后线复活。我围绕着这个问题工作了几天，发现了一个简单的技巧来防止这个丑陋的自动完成功能:

只需添加一个随机字符串来形成目标，如<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:仍然有问题，我决定完全删除<形式>标签和post变量通过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;
}

试试这个: 和上面@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;
}

SASS

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-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;
}

我有一个问题，我不能使用盒子阴影，因为我需要输入字段是透明的。这是一个纯粹的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 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"/>

我有一个解决方案，如果你想防止从谷歌chrome的自动填充，但它有点“砍刀”，只是删除类谷歌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个小时的搜索，似乎谷歌仍然以某种方式覆盖黄色，但我修复了它。这是正确的。它将工作悬停，焦点等以及。你所要做的就是给它加上!important。

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，所以改变自动填充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%);

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

看到CODEPEN

这招对我很管用:

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

下面是上述解决方案的SCSS版本，供使用SASS/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{过渡:background-color 5000 0s ease-in-out 0;}

添加一个小时的延迟将暂停输入元素上的任何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伪选择器来定位这些字段，并按照我们认为合适的方式设置它们的样式。默认样式只影响背景颜色，但大多数其他属性都适用于此，例如border和font-size。我们甚至可以使用-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;
}

这对我来说是有效的(Chrome 76测试)

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

虽然在许多答案中可以找到的解决方案在Chrome中都可以使用，但在Mac和iOS的Safari中却不能使用。

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

身体{ 背景:lightblue; ｝ 输入{ 背景:透明; ｝ 输入。no-autofill-bkg: -webkit-autofill { -webkit-background-clip:文本; ｝ <input type="text" name="email" /> <input type="text" name="email" class="no-autofill-bkg" />

工作环境:Chrome 83 / 84.0.4147.89, Edge 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添加的背景字段填充自动填充在我的情况下，这些是城市，州和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;
}

2023 -透明背景

对于深色背景上的透明输入背景(浅色文本):

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