我放弃!

由于没有办法用自动补全来改变输入的颜色，我决定禁用所有这些webkit浏览器用jQuery。是这样的:

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

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

所以我问自己，“Chrome如何决定在给定的页面上应该自动填充什么?”

“它会查找输入id、输入名称吗?”表单的id吗?表单动作?”

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

1)将密码输入放在文本输入之前。2)给他们相同的名字和身份证……或者根本没有名字和身份。

页面加载后，用javascript你可以动态地改变页面上输入的顺序，或者动态地给他们他们的名字和id…

Chrome不知道是什么击中了它…自动补全功能失效!

疯狂的黑客，我知道。但这对我很有用。

Chrome 34.0.1807.116, OSX 10.7.5

我们可以使用-webkit-autofill伪选择器来定位这些字段，并按照我们认为合适的方式设置它们的样式。默认样式只影响背景颜色，但大多数其他属性都适用于此，例如border和font-size。我们甚至可以使用-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;
}

input:-webkit-autofill {
    border: none;
    border-radius: .3rem;
    caret-color: #fff; /* Pour le I quand on édite */
    color: #fff;
    background: #292a2d;
    /* webkit autofill */
    -webkit-text-fill-color: #fff; /* Surcharge la font color d'autofill */
    -webkit-background-clip: text; /* Supprime le background autofill, utile pour le border radius */
    box-shadow: 0 0 0 50px #292a2d inset; /* Ajoute un fake background à base d'ombrage aplatit */
}

一个可能的解决方法是设置一个“强”内阴影:

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

这对我来说是用来删除字段的黄色背景的:

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