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


Removing input background colour for Chrome autocomplete?

在我正在处理的表单中，chrome会自动填充电子邮件和密码字段。这很好，但是，铬将背景色改为淡黄色。

我正在研究的设计是在深色背景上使用浅色文本，所以这真的会破坏窗体的外观——我有明显的黄色框和几乎看不见的白色文本。一旦磁场聚焦，磁场就恢复正常。

是否可以阻止铬改变这些字段的颜色？

相关讨论

这很好，您可以更改输入框样式以及输入框内的文本样式：

您可以使用任何颜色，例如white、#DDD、rgba(102, 163, 177, 0.45)。

但江户十一〔四〕不会在这里工作。

1
2
3
4
5
6
7
/* 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;
}

此外，还可以使用此选项更改文本颜色：

1
2
3
4
/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

。

建议：不要在成百上千的范围内使用过多的模糊半径。这没有任何好处，可能会将处理器负载放在较弱的移动设备上。(也适用于实际的外部阴影)。对于20px高度的普通输入框，30px的"模糊半径"将完美覆盖它。

相关讨论

以前的添加框阴影的解决方案对于需要纯色背景的人很有效。添加过渡的另一个解决方案是有效的，但必须设置持续时间/延迟意味着在某个时刻它可能会再次显示。

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

1
2
3
4
5
6
7
8
9
10
11
@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

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

号

示例代码笔：https://codepen.io/-steve---/pen/dwgxpb

相关讨论

我有更好的解决方案。

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

1
-webkit-box-shadow: 0 0 0px 1000px white inset;

所以我尝试了一些其他的方法，我想到了：

1
2
3
4
5
6
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

。

相关讨论

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

1
2
3
4
5
6
7
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以来，它一直是按设计的。它允许用户了解数据已预先填充。错误1334

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

1
2
3
<form autocomplete="off">
...
</form

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

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

号

注意，有一个bug正在被跟踪以便再次工作：http://code.google.com/p/chromium/issues/detail？ID=46543

这是WebKit行为。

相关讨论

目前可能的解决方法是在阴影中设置一个"强"的阴影：

1
2
3
4
5
6
7
8
9
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;
}

。

相关讨论

尝试隐藏自动填充样式

1
2
3
4
5
6
7
8
9
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;
    }

。

相关讨论

以上所有答案都有效，但都有缺点。下面的代码是上述两个答案的组合，它们完美地工作，不会闪烁。

1
2
3
4
5
6
7
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;
}

。

相关讨论

萨斯

1
2
3
4
5
6
7
8
input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color
相关讨论

在搜索了两个小时后，谷歌似乎仍然以某种方式覆盖了黄色，但我还是想修复它。这是正确的。它也适用于悬停、聚焦等。你所要做的就是添加！对它很重要。

1
2
3
4
5
6
 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;
  }

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

相关讨论

如果您想保持自动完成功能的完整性，可以使用jquery删除chrome的样式。我在这里写了一篇短文：http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

1
2
3
4
5
6
7
8
9
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。将转换设置为非常长的时间。

1
2
3
4
5
6
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;
}

号

相关讨论

除此之外：

1
2
3
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

号

您可能还想添加

1
2
3
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的javascript解决方案。如果你觉得这个有用或者决定重新发布我的解决方案，我只要求你包括我的名字。享受吧。——丹尼尔·费尔韦瑟

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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")，然后将文本值设置为它以前的状态(自动填充的文本)。请记住，此代码将在每个浏览器中运行，并检查网页中的每个输入字段，并根据需要进行相应调整。

相关讨论

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

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

试试这个：与上面@nathan white的回答相同，只是稍作改动。

1
2
3
4
5
6
7
8
9
/* 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;
}

。

相关讨论

对于使用指南针的人：

1
2
3
4
5
6
7
8
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);
            }
        }
    }
}

。

相关讨论

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

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

。

灰度过滤器将黄色替换为灰色，然后亮度移除灰色。

参见代码笔

Daniel Fairweather的解决方案(删除铬自动完成的输入背景色？)(我很愿意支持他的解决方案，但仍然需要15个代表)效果非常好。大多数上票的解决方案有一个很大的区别：你可以保留背景图像！但有点修改(只是铬检查)

你需要记住，它只在可见区域工作！

因此，如果对窗体使用了$.Show()，则需要在Show()事件之后运行此代码。

我的完整解决方案(我有登录表单的显示/隐藏按钮)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 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();
    }

号

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

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

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

1
2
3
4
5
6
7
8
9
$(document).ready(function () {
    setTimeout(function () {
            var data = $("input:-webkit-autofill");
            data.each(function (i,obj) {
            $(obj).removeClass("input:-webkit-autofill");
                    obj.value ="";
            });
    },1);          
});

号

我放弃！

由于无法用自动完成功能更改输入的颜色，我决定用Webkit浏览器的jquery禁用所有这些功能。这样地：

1
2
3
4
5
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

这对于输入、文本区域和选择在正常、悬停、焦点和活动状态下都有效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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版本。

1
2
3
4
5
6
7
8
9
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
    &, &:hover, &:focus, &:active
    {
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}

。

不幸的是，严格地说，上述解决方案在2016年对我来说都不起作用(这个问题之后的几年)。

下面是我使用的积极的解决方案：

1
2
3
4
5
6
7
8
9
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)">

号

基本上，它在保存值的同时删除标记，并重新创建它，然后返回值。

相关讨论

谢谢本杰明！

mootools解决方案有点复杂，因为我无法通过使用$('input:-webkit-autofill')获得字段，所以我使用的是以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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
}

。

这对我很有用：

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

如前所述，inset-webkit box shadow对我来说效果最好。

1
2
3
4
/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

号

还要对代码段进行编码以更改文本颜色：

1
2
3
input:-webkit-autofill:first-line {
     color: #797979;
}

号

简单，只需添加，

1
    autocomplete="new-password"

号

到密码字段。

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
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用户界面，必须使用其他属性，如：

1
2
3
4
5
6
7
8
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*/
}

这对我有用。

埃多克斯1〔2〕

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function($){
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
       $('input, select').on('change focus', function (e) {
            setTimeout(function () {
                $.each(
                    document.querySelectorAll('*:-webkit-autofill'),
                    function () {
                        var clone = $(this).clone(true, true);
                        $(this).after(clone).remove();
                        updateActions();
                    })
            }, 300)
        }).change();
    }
    var updateActions = function(){};// method for update input actions
    updateActions(); // start on load and on rebuild
})(jQuery)

号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
*:-webkit-autofill,
*:-webkit-autofill:hover,
*:-webkit-autofill:focus,
*:-webkit-autofill:active {
    /* use animation hack, if you have hard styled input */
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
    /* if input has one color, and didn't have bg-image use shadow */
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    /* text color */
    -webkit-text-fill-color: #fff;
    /* font weigth */
    font-weight: 300!important;
}

号

1
2
3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<input type="text" name="name" autocomplete="name"/>
<input type="email" name="email" autocomplete="email"/>

号

使用此选项并检查问题是否已解决

1
<input type="email" id="email" name="email" class="form-control validate" onfocus="this.removeAttribute('readonly');" readonly>

号

两年后复活。我花了几天的时间来解决这个问题，找到了一个简单的技巧来防止这个丑陋的自动完成功能：

只需添加一个随机字符串以形成像

这样的目标

它适用于最新的Chrome版本34.0.1847.137。

更新：如果它不起作用，就给类似

这样的奇怪的协议，然后用javascript填充这个区域：

1
$('#test').attr('action', 'http://example.site/login.php');

更新2：仍然有问题，我决定通过jquery完全删除

标记和post变量。更容易。

相关讨论

可能有点晚了，但对于未来的参考，这里有一个只有CSS的解决方案http://lostmonocle.com/post/147912630/fixing-the-chrome-autocomplete-background-colour

您所要做的就是添加另一个选择器来覆盖默认的输入字段设置。所以用而不是

1
2
3
input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

。

有点像

1
2
3
#login input:-webkit-autofill {
    background-color: #ff00ff;
}

。

或

1
2
3
form input:-webkit-autofill {
    background-color: #f0f;
}

这对我来说似乎很管用。

相关讨论