在我正在处理的表单上，Chrome 浏览器会自动填写电子邮件和密码字段。很好，但是 Chrome 将背景颜色更改为浅黄色。
我正在进行的设计是在深色背景上使用浅色文本，因此这确实弄乱了表单的外观 - 我有明显的黄色框和几乎看不见的白色文本。聚焦后，场将恢复正常。
是否可以停止 Chrome 更改这些字段的颜色？
你可以改变输入框风格以及内部文本样式input框：
在这里您可以使用任何颜色，例如white ， #DDD ， rgba(102, 163, 177, 0.45) 102，163，177，0.45）。
但是transparent在这里是行不通的。
/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active
{
-webkit-box-shadow: 0 0 0 30px white inset !important;
}此外，您可以使用它来更改文本颜色：
/*Change text in autofill textbox*/
input:-webkit-autofill
{
-webkit-text-fill-color: yellow !important;
}建议：不要使用成百上千的模糊半径。这没有任何好处，并且可能会使处理器负载在较弱的移动设备上。 （对于实际的外部阴影也是如此）。对于高度为 20px 的普通输入框，可以完美地覆盖 30px 的 “模糊半径”。
以前添加盒形阴影的解决方案非常适合需要纯色背景的人。添加过渡的另一种解决方案是有效的，但是必须设置持续时间 / 延迟意味着它将在某个时候再次显示。
我的解决方案是改用关键帧，这样它将始终显示您选择的颜色。
@-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;
}Codepen 示例： https：//codepen.io/-Steve-/pen/dwgxPB
我有一个更好的解决方案。
将背景设置为如下所示的另一种颜色并不能解决我的问题，因为我需要一个透明的输入字段
-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;
}