自动填充后，透明输入字段会变为淡黄色

Question

目前我正在为登录和注册创建简单的表单。样式更改为透明背景，我创建了一个浮动标签。到目前为止，一切都很好。

当我手动输入一些数据时，标签会变小并按需要转到顶部，背景保持透明。

但这是问题所在。虽然关闭了自动完成功能，但我的浏览器会自动完成选项。 如果我选择输入字段的建议，它会以某种方式切换为淡黄色。

任何想法来自何处以及如何防止这种情况发生？

谢谢你的时间！

Answer 1

您可以使用以下CSS覆盖此内容：

input,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    background-color: transparent!important;
}

在Google Chrome上，您应该执行以下操作：

input,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px red inset;
}

有关在此处删除Google Chrome中自动填充色的详情，请访问：Removing input background colour for Chrome autocomplete?

通过将input添加到CSS规则中，您可以在选择自动填充值时避免黄色背景的闪烁。