我有个更好的办法。

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

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

所以我尝试了一些其他的方法，然后我想到了这个:

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 white inset;

所以我尝试了一些其他的方法，然后我想到了这个:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    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;
}

要有一个透明的背景，同时不使用时间延迟(特别是在现代web应用程序中，人们可以停止使用它一段时间，并希望界面的行为是可预测的)，使用这个:

input:-webkit-autofill { 
    -webkit-background-clip: text;
}

身体{ 背景:lightblue; ｝ 输入{ 背景:透明; ｝ 输入。no-autofill-bkg: -webkit-autofill { -webkit-background-clip:文本; ｝ <input type="text" name="email" /> <input type="text" name="email" class="no-autofill-bkg" />

工作环境:Chrome 83 / 84.0.4147.89, Edge 84.0.522.44

如果你决定重新发布我的解决方案，我只要求你包括我的名字或链接到这个。

不幸的是，上述解决方案在2016年对我都不起作用(在这个问题提出几年后)

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

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)">

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

试试这个: 和上面@Nathan-white的答案一样，只是做了一些小调整。

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