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

Question

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

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

我怎样才能阻止这种情况发生？我没有仔细测试过，但是好像Firefox和Safari都没有这个问题。

Answer 1

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

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