is Google Chrome <input /> Auto fill background color changed in Version 72.0?

▼魔方 西西 提交于 2021-02-07 12:01:05

问题


I Recently Noticed in Google Chrome it is showing blue color background for all inputs elements which are auto filled values


回答1:


Yes Google changed the background color of the autofill preview to GoogleBlue50. You can find the issue here: https://bugs.chromium.org/p/chromium/issues/detail?id=935991

Since Google Chrome 72 the new autofill color is #E8F0FE / rgb(232, 240, 254). Until Google Chrome 72 the autofill fields were colored with #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">

Note: In case you want to overide the autofill color you can use one of the solutions provided on this questions:

  • Google Chrome form autofill and its yellow background
  • Removing input background colour for Chrome autocomplete?

It is planned to split the CSS rules for autofill previewed and autofill selected in future:

  • autofill previewed (fields are filled while hovering the autofill suggestion).
  • autofill selected (fields are filled with a autofill suggestion).



回答2:


Yes, Google has changed this for some unknown reason.

It was being tracked but it does not say why it was changed: https://bugs.chromium.org/p/chromium/issues/detail?id=935991

The update made it's way into Chrome Version 72.0.3626.119

In my opinion it looks too much like the disabled style. I guess everyone who uses Chrome is already used to the yellow background on autofill inputs so this may cause a lot of confusion for users now.

However, like all things, people will eventually get used to the new color. If you REALLY want it back, you can use the following css:

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

Note: This will override any box-shadow that you already have applied to your input.




回答3:


Yes its changed to light blue.



来源:https://stackoverflow.com/questions/54941772/is-google-chrome-input-auto-fill-background-color-changed-in-version-72-0

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!