提问人：van 提问时间：3/6/2022 更新时间：5/12/2022 访问量：1008
在移动设备上自动填充颜色和背景的 Chrome 错误
Chrome bug for autofill color and background on mobile
问：
我遇到了一个非常奇怪的错误，它只有在实际移动设备上查看时才会出现在 Chrome 中。在我的结帐中，输入字段的默认颜色是深色，带有白色文本（风格化以与网站品牌保持一致）。无论浏览器如何，自动填充颜色（白色背景和黑色文本）都可以在桌面上正常工作，它们在 iOS 上的 Safari 浏览器中也能正常工作。
奇怪的是，仅在移动设备上的 Chrome 上，无论我使用什么 CSS（包括此方法），输入字段背景颜色都不会改变，文本也会变黑。
这意味着在黑色输入背景下，用户无法看到他们的信息。为了测试这个问题，我使用了上面的链接方法（用红色文本代替绿色）。我甚至尝试过有罪的人和没有罪人，可悲的是无济于事。!important
CSS格式：
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid red!important;
-webkit-text-fill-color: red!important;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}
示例（Safari - 姓名字段自动完成，姓氏字段键入以显示默认状态）：
示例（Chrome - 姓名字段自动完成，姓氏字段键入以显示默认状态）：
这到底是怎么回事，我很困惑。如前所述，这仅在 Chrome 中的移动设备 （iOS） 上查看网站时才会发生，如果我在桌面上以响应式视图查看网站，它在 Chrome 中的行为也正确。
有什么想法吗？已知的错误/行为？
答：
0赞
Thales Kenne
5/12/2022
#1
我设法用不同的方法解决了它：
// Workaround to remove autofill color from inputs
input, select {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
-webkit-background-clip: text !important;
background-clip: text !important;
}
据我测试，这适用于 iOS 上的 Safari 和 Chrome 以及 Android 上的 Chrome。
上一个：素数图表中的文本失真
评论