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

在我正在处理的表单上，Chrome浏览器会自动填写电子邮件和密码字段。 很好，但是Chrome将背景颜色更改为浅黄色。

我正在研究的设计是在深色背景上使用浅色文本，因此这确实弄乱了表单的外观-我有明显的黄色框和几乎看不见的白色文本。 聚焦后，场将恢复正常。

是否可以停止Chrome更改这些字段的颜色？

#1楼

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

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

#2楼

这可以正常工作，您可以在输入框内更改输入框样式以及文本样式：

在这里您可以使用任何颜色，例如

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,
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的“模糊半径”。

#3楼

如前所述，对我来说，插入-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;
}
           

#4楼

我放弃！

由于无法通过自动完成功能更改输入的颜色，因此我决定使用jQuery将其全部禁用以用于Webkit浏览器。 像这样：

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

#5楼

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

再次抱歉，我希望将其作为评论。

如果您愿意，我可以在我使用它的网站上放置一个链接。

#6楼

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

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

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

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

1）将密码输入置于文本输入之前。 2）给他们相同的名称和ID ...或根本不给名称和ID。

页面加载后，可以使用javascript动态更改页面上输入的顺序，也可以动态为其提供名称和ID。

而且Chrome不知道该怎么击...自动完成功能已损坏！

疯狂破解，我知道。 但这对我有用。

Chrome 34.0.1847.116，OSX 10.7.5

#7楼

除此之外：

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

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

#8楼

由于这种着色行为来自WebKit，因此已按设计进行了设计。 它使用户可以了解已预填充的数据。 错误1334

您可以执行以下操作（或在特定的表单控件上关闭自动完成功能：

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

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

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

请注意，正在跟踪一个错误，该漏洞可以再次运行： http : //code.google.com/p/chromium/issues/detail?id=46543

这是WebKit的行为。

#9楼

对于使用指南针的用户：

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

#10楼

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

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

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

#11楼

以上所有答案均有效，但确实有其错误。 下面的代码是上面两个答案的结合，可以完美工作而不会闪烁。

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

#12楼

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

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

#13楼

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

#14楼

萨斯

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color
           

#15楼

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

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

#16楼

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

#17楼

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

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

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}
           

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

#18楼

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

基本上，它在保存值的同时删除标签，然后重新创建它，然后放回该值。

#19楼

这是完成此任务的复杂解决方案。

#20楼

如果您想防止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);           
});
           

#21楼

简单，只需添加，

autocomplete="new-password"
           

到密码字段。

#22楼

经过2个小时的搜索，似乎Google仍然以某种方式覆盖了黄色，但我为此提供了解决方案。 那就对了。 它也将适用于悬停，聚焦等。 您所要做的就是在其中添加！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;
  }
           

这将完全消除输入字段中的黄色

#23楼

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

#24楼

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

#25楼

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

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

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

请参阅CODEPEN

#26楼

这为我工作：

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

#27楼

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

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

#28楼

这对我有用。

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

#29楼

增加一小时的延迟将暂停输入元素上的所有CSS更改。

这比添加过渡动画或内部阴影更好。

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

#30楼

这对我有用（Chrome 76已测试）

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

#31楼

谢谢本杰明！

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
}
           

#32楼

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