html - 自动完成时透明输入字段变为淡黄色

Question

目前我正在创建用于登录和注册的简单表单。样式更改为透明背景，我创建了一个 float 标签。到目前为止一切顺利，一切正常。

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

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

有什么想法是从哪里来的，我该如何防止这种情况发生？

感谢您的宝贵时间!

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 规则来避免在选择自动完成值时出现黄色背景。