这将适用于正常、悬停、聚焦和激活状态下的输入、文本区和选择。

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 0 1000px white inset !important;
}

下面是上述解决方案的SCSS版本，供使用SASS/SCSS的人使用。

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    &, &:hover, &:focus, &:active{
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}

虽然在许多答案中可以找到的解决方案在Chrome中都可以使用，但在Mac和iOS的Safari中却不能使用。

Safari需要一个额外的语句- background-clip。

这是一个解决方案的完整代码，适用于不同平台上的所有主要浏览器:

/* Disable autofill highlighting */
input:-webkit-autofill {
    -webkit-text-fill-color: var(--text-input-color) !important;
    -webkit-box-shadow: 0 0 0 1rem var(--page-background-color) inset !important;
    background-clip: content-box !important;
}

(请用自己的值修改——text-input-color和——page-background-color)

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

只需添加一个随机字符串来形成目标，如<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。它更容易。

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

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,
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 0 1000px white inset !important;
}

下面是上述解决方案的SCSS版本，供使用SASS/SCSS的人使用。

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    &, &:hover, &:focus, &:active{
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}