删除Chrome自动填充的输入背景颜色？

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

我正在研究的设计是在深色背景上使用浅色文字,所以这真的弄乱了表格的外观 - 我有鲜明的黄色方块和几乎看不见的白色文字.场聚焦后,场恢复正常.

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

1> Fareed Alnam..：

---

这很好用,您可以更改输入框样式以及输入框内的文本样式:

在这里,你可以使用任何颜色例如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'模糊半径'将完美覆盖它.

2> Steve..：

---

之前添加框阴影的解决方案适用于需要纯色背景的人.添加转换的另一种解决方案是有效的,但必须设置持续时间/延迟将意味着在某些时候它可能再次显示.

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

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

3> 小智..：

---

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

将背景设置为下面的另一种颜色并没有解决我的问题,因为我需要一个透明的输入字段

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

---

不要将"转换持续时间"设置得高得离谱,而是设置"转换延迟"而不是更好.这样你甚至可以进一步减少颜色变化的可能性.

---

太棒了,我还需要一个透明的背景.PS:不要忘记`-webkit-text-fill-color:yellow!important;`用于文本颜色.

---

这有效...大约5000秒...：D

4> Gísli Freyr ..：

---

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

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

---

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

5> Mohamed Mans..：

---

这是设计的,因为这种着色行为来自WebKit.它允许用户了解已预先填充的数据.错误1334

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

...


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

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


请注意,有一个错误被跟踪,以便再次使用:http://code.google.com/p/chromium/issues/detail？id = 4653

这是一个WebKit行为.

        
谢谢,但webkit CSS规则不起作用.用户代理样式表总是覆盖背景颜色,即使它(a)设置为`!important`和(b)以ID为目标,具有更高的特异性.看起来Chrome总是会覆盖它.删除自动完成确实有效,但它真的不是我想要做的. 
Chrome会阻止任何CSS尝试覆盖该黄色.设置`autocomplete ="off"`肯定会引发可访问性问题.为什么这个答案标记为正确无误？ 
这是一个很好的解决方案但是如果你使用React,它会抱怨autocomplete是一个未知的DOM属性.因此,它实际上是autoComplete(注意camelcased). 

6> Tamás Pap..：
目前可能的解决方法是设置一个"强大"的内部阴影:

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

        
这是实际有效的解决方案，我们不希望仅跳过黄色背景几次，因为这样会导致接受的答案。 

7> Francisco Co..：
试试隐藏自动填充样式

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

        

8> 小智..：
所有上述答案都有效,但确实存在缺陷.下面的代码是上述两个答案的合并,完美无缺,没有眨眼.

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

        

9> Patrick Fish..：
上海社会科学院

input:-webkit-autofill

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

        

10> 小智..：
经过2个小时的搜索,似乎谷歌仍然以某种方式覆盖黄色,但我为它修复它.那就对了.它也适用于悬停,焦点等.你所要做的就是添加!重要的是它.

 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> Linghua Jin..：
除此之外:

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

这样看起来就像任何bootstrap输入.

        

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

        

13> 小智..：
我遇到了一个无法使用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;
}

        
与其将“ transition-duration”设置得离谱地高，不如将其设置为“ transition-delay”。这样，您甚至可以进一步减少颜色变化的可能性。 

14> 小智..：
试试这个:与@ 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;
}

        

15> StefansArya..：
添加一个小时的延迟会暂停输入元素上的任何css更改.

这比使用过渡动画或内部阴影更好.

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

        

16> 小智..：
我使用没有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'),然后将文本值设置为它的先前状态(自动填充的文本).请记住,此代码将在每个浏览器中运行,并将检查网页中的每个输入字段,根据您的需要进行调整.

        

17> 2ne..：
我有一个使用CSS过滤器的纯CSS解决方案。

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


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

请参阅CODEPEN