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


650

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

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

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


2
:这里有更广泛的信息stackoverflow.com/questions/2338102/...
DASM

看到我对类似帖子的回答:stackoverflow.com/a/13691346/336235
Ernests Karlsons 2012年

Answers:


1167

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

在这里,你可以使用任何颜色例如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的“模糊半径”。


1
现在,在Chrome浏览器中,用户代理样式表显示:-internal-autofill-previewed:-internal-autofill-selected伪类而不是-webkit-autofill...。但是,-webkit-autofill仍然可以神秘地工作。我个人不需要!important
安迪

我不需要悬停/焦点/活动的伪选择器
antoine129,

317

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

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

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


像魅力一样工作。
Lalnuntluanga Chhakchhuak

1
这绝对有效!(Chrome 79)
Lashae

3
我发现这比公认的答案更好。。。box-shadow方法很聪明并且可以正常工作,但是当用户选择一个值进行自动填充时,默认颜色会在输入字段中短暂闪烁,这很麻烦。如果您的输入具有深色背景。此解决方案没有这样的问题。干杯!
skwidbreth

完善!工作得比我期望的要好!
sdlins

2
此功能适用于Vuetify 2,尤其是如果您设置color: inherit
Marc

275

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

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

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

7
太棒了,我还需要透明的背景。PS:别忘了-webkit-text-fill-color: yellow !important;输入文字颜色。
gfpacheco

当输入已用隐藏/显示时,仍将显示自动填充背景display小提琴-看看
马丁

27
与其设置transition-duration荒谬的高值,不如将其设置为高transition-delay。这样,您甚至可以进一步减少颜色变化的可能性。
毛茸茸的

transition黑客只会工作如果输入不会自动填充浏览器记录的默认项,否则黄色背景仍然会在那里。
guari

1
很好的解决方案...。但是为什么这样做有效?为什么设置background-color不起作用?Chrome需要解决此问题!!
TetraDev '16

60

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

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

6
我已将图像设置为输入字段的背景,此解决方案去除了黄色阴影,但背景图像仍然隐藏
Matteo Tassinari

迄今为止最好的解决方案,非常适合与现有box-shadow的验证一起使用
-Yoann

chrome表示"color 9999s ease-out, background-color 9999s ease-out";无效。然后,我使用了代码,-webkit-transition: background-color 9999s ease-out;以及-webkit-text-fill-color: #fff !important;
naanace

1
工作,但对我来说没有双引号了;)
乔恩(Jon

@Yoann与您现有的box-shadow验证如何配合使用?在我的情况下,由于此css规则,我的自定义红色框阴影(指示输入错误)被延迟,使用户认为最新输入实际上是好的,但它是无效的。
Paul Razvan Berg,

50

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

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

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

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

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

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

这是WebKit的行为。


22
谢谢,但是该webkit CSS规则不起作用。用户代理样式表始终会否决背景颜色,即使(a)设置为背景颜色,!important并且(b)设置了具有较高特异性的ID作为目标。Chrome似乎总是会覆盖它。删除自动完成功能似乎确实可行,但实际上不是我想要执行的操作。
DisgruntledGoat 2010年

1
有些人也有同样的问题,您是否检查过错误发布?code.google.com/p/chromium/issues/detail?id=1334
Mohamed Mansour 2010年

6
Chrome会阻止所有CSS尝试覆盖该黄色。设置autocomplete="off"无疑会引发可访问性问题。为什么答案总是被标记为正确的?
若昂

2
这是一个很好的解决方案,但是如果您使用的是React,它将抱怨自动完成是未知的DOM属性。因此,它实际上是autoComplete(注释驼峰式)。
蒂姆·斯科里克

2
关闭自动完成是一个黑客不是一个解决方案
保洛

30

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

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
这是实际工作的解决方案,我们不希望跳过黄色背景只有一些时间,作为公认的答案会导致英寸
davidkonrad

22

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

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

对于好奇,背景色无效。-webkit-box-shadow是覆盖Chrome中黄色背景的巧妙位
Geuis,2016年

19

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

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

我已将图像设置为输入字段的背景,此解决方案去除了黄色阴影,但背景图像仍然隐藏
Matteo Tassinari

这是唯一一个为我工作在Chrome 83.最投票一个是工作,直到”铬82
sdlins


15

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

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


11

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

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

10

除此之外:

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

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


10

我有一个问题,我无法使用阴影框,因为我需要输入字段透明。这有点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;
}

截至目前,最新的Chrome 50.xx版本都可以正常运行。非常感谢!
vivekkupadhyay '16

2
与其设置transition-duration荒谬的高值,不如将其设置为高transition-delay。这样,您甚至可以进一步减少颜色变化的可能性。
毛茸茸的

@Shaggy谢谢,我只是将其切换为延迟状态。好多了。
亚历克斯

9

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

尝试所有答案后,这是最佳答案。
gfcodix

8

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

尽管它阻止了Kicksend的mailcheck,但这似乎是最好的解决方案。关于如何解决这个问题的任何想法?
若昂

这不是一个好的解决方案,因为随后Google chrome的密码自动完成功能将停止工作。最初是您填写名称,然后Google chrome自动填写密码。但是,一旦上述javascript执行,名称将被删除并重新设置,并且自动填充的密码将丢失
vanval

6

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


好吧,它在大多数情况下都有效。.很遗憾,它清除了我的密码。试图让它先保存密码,然后在for循环后重设密码,但是chrome似乎对此有些问题。mmmm
Dustin Silk

6

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

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

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

请参阅CODEPEN


这对我不起作用吗?
Ikechukwu Eze

5

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

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

不错,SASS代码也要感谢thanx!
Bernoulli IT

4

对于使用指南针的用户:

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

3

我放弃!

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

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

3

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

3

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

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

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


3

这对我有用(Chrome 76已测试)

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

3

我尝试了几乎所有上述解决方案。什么都不适合我。最终使用此解决方案。希望有人帮忙。

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

这不再起作用了,并且从CSS Tricks BTW复制而来
Bernoulli IT

1
这对我有用。
AzizStark

2

谢谢本杰明!

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
}

2

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

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

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

通过对用户名和密码输入的试验,只有两种方法导致Chrome无法找到应自动填充的字段:

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

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

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

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

Chrome 34.0.1847.116,OSX 10.7.5


2

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

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


fare namrouti的解决方案在Chrome 51.0.2704.106 / OSX 10.11.5上对我来说效果很好。
oens

2

我用这个。为我工作。删除字段的黄色背景。

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

1

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

1

这为我工作:

padding: 5px;
background-clip: content-box;
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.