Question

我最近在Google Chrome浏览器中发现，所有输入元素都是自动填充的值，显示蓝色背景

Answer 1

是的，Google将自动填充预览的背景颜色更改为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">

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

计划将来split the CSS rules for autofill previewed and autofill selected：

预览自动填充（将鼠标悬停在自动填充建议上，字段会被填充）。
已选择自动填充（字段中填充了自动填充建议）。

Answer 2

是的，它变成了浅蓝色。

Answer 3

是的，Google出于某些未知原因已更改了此设置。

已对其进行跟踪，但没有说明更改原因：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;
}

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

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

3 个答案: