Chrome 移动设备上自动填充颜色和背景的错误

Question

我遇到了一个非常奇怪的错误，只有在实际的移动设备上查看时才会出现在 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 中也能正常运行。

有什么想法吗？已知的错误/行为？

Answer 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。