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

这是由于此着色行为来自 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);
    });
});}

我开发了另一个使用没有 JQuery 的 JavaScript 的解决方案。如果您觉得这有用或决定重新发布我的解决方案，我只要求您包括我的名字。享受。——丹尼尔·费尔韦瑟

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”），然后将文本值设置为其先前状态（自动填充文本）。请记住，此代码将在每个浏览器中运行，并将检查网页中的每个输入字段，并根据您的需要进行相应调整。

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

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#DDDrgba(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 的“模糊半径”将完美地覆盖它。

编辑 2023：要同时具有透明度和更改背景颜色的能力：

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

请注意，此处的转换在最近的 Chrome 浏览器中没有任何作用，它只是旧版本 Chrome 的后备解决方案。

我放弃了！

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

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

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

于是我问自己，“Chrome 如何确定在给定页面上应该自动填充哪些内容？

“它是否查找输入ID，输入名称？表格 ID？形成行动？

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

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

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

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

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

铬 34.0.1847.116， OSX 10.7.5

除此之外：

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

我遇到了一个问题，我不能使用 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;
}

之前添加箱形阴影的解决方案适用于需要纯色背景的人。添加过渡的另一种解决方案有效，但必须设置持续时间/延迟将意味着它可能会在某个时候再次显示。

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

@-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

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

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

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

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

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

Google Chrome 用户代理阻止了开发人员的，因此对于更改 UI 必须使用另一个属性，如下所示：CSSautofill

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

添加一小时的延迟将暂停对输入元素的任何 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;
}

要在不使用时间延迟的情况下拥有透明的背景（尤其是在现代 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" />

正在处理： 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  {
    transition: background-color 5000s;
    -webkit-text-fill-color: #fff !important;
}

这基本上等同于透明背景。

2023 年更新

在最新更新后工作：

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 { 
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
}