Google Chrome <input /> 自动填充背景色在版本 72.0 中是否已更改？

Question

我最近在谷歌浏览器中注意到它为所有自动填充值的输入元素显示蓝色背景

原文由 Guruganesh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，谷歌将自动填充预览的背景颜色更改为 GoogleBlue50 。您可以在此处找到问题： https ://bugs.chromium.org/p/chromium/issues/detail?id=935991

自 Google Chrome 72 以来，新的自动填充颜色为 #E8F0FE / rgb(232, 240, 254) 。在 Google Chrome 72 之前，自动填充字段使用 #FAFFBD / rgb(250, 255, 189) 着色：

 input {
  border: 1px solid black;
  padding: 4px 3px;
}
.show-autofill-new {
  background-color: #E8F0FE !important;
  background-image: none !important;
  color: #000000 !important;
}
.show-autofill-old {
  background-color: #FAFFBD !important;
  background-image: none !important;
  color: #000000 !important;
}

 <input class="show-autofill-new" placeholder="since 72" type="text">
<input class="show-autofill-old" placeholder="until 72" type="text">

注意： 如果您想覆盖自动填充颜色，您可以使用针对此问题提供的解决方案之一：

• 谷歌浏览器表单自动填充及其黄色背景
• 删除 Chrome 自动完成的输入背景颜色？

---

计划在将来 拆分自动填充预览和自动填充选择的 CSS 规则：

• 自动填充预览（在悬停自动填充建议时填充字段）。
• 已选择自动填充（字段填充有自动填充建议）。

原文由 Sebastian Brosch 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

是的，谷歌出于某种未知原因更改了此设置。

它正在被跟踪，但没有说明更改原因： https ://bugs.chromium.org/p/chromium/issues/detail?id=935991

该更新已进入 Chrome 版本 72.0.3626.119

在我看来，它看起来太像残疾人风格了。我想每个使用 Chrome 的人都已经习惯了自动填充输入的黄色背景，所以现在这可能会给用户带来很多困惑。

然而，就像所有事物一样，人们最终会习惯新颜色。如果你真的想要它回来，你可以使用以下 css：

 input:-webkit-autofill, input:focus:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 100px rgb(250, 255, 189) inset;
}

注意： 这将覆盖您已经应用于输入的任何框阴影。

原文由 Bruffstar 发布，翻译遵循 CC BY-SA 4.0 许可协议