删除 Chrome 自动完成功能的输入背景色？

在我正在处理的表单上，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;
}