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

Question

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

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

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

Answer 1

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

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