在Chrome自动完成时去除输入框背景颜色？

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

Google Chrome的用户代理会阻止开发人员使用CSS，因此如果要更改自动填充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*/
}

以下方法适用于我来消除字段的黄色背景:

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

对于使用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);
            }
        }
    }
}

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

可以更改此框的颜色，例如接受的答案。

但是，如果您想使背景透明，则此方法无用。然而，有一种方法（或者说是变通方法）可以使其透明，如下所示：

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

这基本上相当于透明背景。

这是我的解决方案：

对我很有用：

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

我放弃了！

由于无法更改具有自动完成功能的输入框的颜色，我决定使用jQuery在Webkit浏览器中禁用所有自动完成功能。代码如下：

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

我们可以使用-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;
}

对我来说，没有任何解决方案有效，因为输入叠加在页面背景上具有半透明的背景，这导致阴影效果无法显示。

于是我问自己：“Chrome是如何确定给定页面上应该自动填充什么内容的？”

“它是查找输入标识、输入名称、表单标识还是表单操作？”

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

1）将密码输入框放在文本输入框前面。2）给它们相同的名称和标识符，或者不设置名称和标识符。

在页面加载后，使用JavaScript可以动态地更改页面中输入框的顺序，或者动态地为它们分配名称和标识符…

然后，Chrome就不知道发生了什么了…自动完成功能瘫痪了！

这个方法有点奇怪，但对我来说有效。

Chrome 34.0.1847.116，OSX 10.7.5