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

您可以更改输入框样式以及 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 的“模糊半径”将完美地覆盖它。

---

我有更好的解决方案。

将背景设置为如下所示的另一种颜色并不能解决我的问题，因为我需要一个透明的输入字段

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

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

---

要在不使用时间延迟的情况下获得透明背景（尤其是在现代 Web 应用程序中，人们可以暂时停止使用它并希望界面具有可预测的行为），请使用以下命令：

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

身体{背景：浅蓝色； }输入{背景：透明； } input.no-autofill-bkg:-webkit-autofill { -webkit-background-clip: text; }

正在处理：Chrome 83 / 84.0.4147.89，Edge 84.0.522.44

如果您决定重新发布我的解决方案，我只要求您提供我的姓名或指向此的链接。

---

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

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

---

自从这种着色行为来自 WebKit 以来，这就是设计的。它允许用户了解数据已经预填充。 Bug 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 {
    -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;
}  

---

2022 年更新

2022 年更新后工作：

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

---

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

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

---

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:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

---

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

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

---

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

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

---

我遇到了无法使用 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;
}

---

试试这个：与上面的 @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;
}

---

除此之外：

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

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

---

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

---

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

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

灰度滤镜用灰色代替黄色，然后亮度去除灰色。

SEE CODEPEN

---

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

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

---

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

---

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

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

---

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

---

可以更改此框的颜色，例如接受的答案。

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

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

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

---

我们可以使用 -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;
}

---

Daniel Fairweather (Removing input background colour for Chrome autocomplete?) 的解决方案（我很想支持他的解决方案，但仍然需要 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();
}

再次抱歉，我希望它是一个评论。

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

---

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

$(document).ready(function () {
    setTimeout(function () {
        var data = $("input:-webkit-autofill");

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

---

我放弃！

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

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

---

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

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

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

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

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

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

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

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

铬 34.0.1847.116，OSX 10.7.5

---

这对我有用：

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

---