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

如前所述，inset -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;
}

我开发了另一个解决方案使用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();
        }
    }
}

This code is based on the fact that Google Chrome removes the Webkit style as soon as additional text is entered. Simply changing the input field value does not suffice, Chrome wants an event. By focusing on each input field (text, password), we can send a keyboard event (the letter 'a') and then set the text value to it's previous state (the auto-filled text). Keep in mind that this code will run in every browser and will check every input field within the webpage, adjust it accordingly to your needs.

之前添加盒子阴影的解决方案对于需要纯色背景的人来说效果很好。添加过渡的另一个解决方案是可行的，但必须设置持续时间/延迟将意味着在某个时候它可能会再次显示。

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

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

代码示例:https://codepen.io/-Steve-/pen/dwgxPB

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

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

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

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

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

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

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

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

Chrome 34.0.1807.116, OSX 10.7.5

两年后线复活。我围绕着这个问题工作了几天，发现了一个简单的技巧来防止这个丑陋的自动完成功能:

只需添加一个随机字符串来形成目标，如<form action="site.com/login.php?random=123213">

它工作在最新的chrome版本34.0.1847.137

更新:如果它不起作用，给动作奇怪的协议，比如<form id="test" action="xxx://">，然后用javascript填充这个区域:

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

更新2:仍然有问题，我决定完全删除<形式>标签和post变量通过jquery。它更容易。