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

Question

我设置了一个简单的用户名密码表单，其中应用了一些样式。它很棒。当我登录多次时出现问题。

即，由于Chrome识别我的电子邮件，因此会尝试自动填充该电子邮件。如果我有责任，用户名文本框会获得令人厌恶的黄色。有关屏幕截图，请参见下面的图

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

Answer 1

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

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