从 Chrome 自动填充电子邮件后，摆脱输入时的黄色填充

Question

我设置了一个简单的用户名密码表单，并应用了一些样式。它工作得很好。当我多次登录时，问题就来了。

也就是说，由于 Chrome 可以识别我的电子邮件，它会尝试自动填充它。如果我同意，用户名文本框会变成令人厌恶的黄色。请参阅下面的图片以获取屏幕截图。

我怎样才能阻止这种情况发生？我没有彻底测试过，但似乎Firefox和Safari都没有这个问题。

Answer 1

你可以使用:-webkit-autofill CSS 伪类，当一个元素的值被浏览器自动填充时它匹配。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}