autocomplete - 删除 Chrome 自动完成的输入背景颜色？

Question

在我处理的表单中，Chrome 会自动填写电子邮件和密码字段。这很好，但是，Chrome 会将背景颜色更改为淡黄色。

我正在处理的设计是在深色背景上使用浅色文本，所以这确实弄乱了表单的外观 - 我有鲜明的黄色框和几乎看不见的白色文本。一旦字段聚焦，字段将恢复正常。

是否可以阻止 Chrome 更改这些字段的颜色？

Answer 1

您可以更改输入框样式以及 input 框内的文本样式:

在这里你可以使用任何颜色，例如白色，#DDD，rgba(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 的“模糊半径”将完美覆盖它。