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

Question

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

Benzedrine

Answer 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).

Stylobate

Got here because my autofill styles, :-webkit-autofill,:-webkit-autofill:hover, :-webkit-autofill:focus work only for hover autofill, but when it's not hovered, it uses this #E8F0FE color that horribly clashes with our website's colors and there's seemingly no possible fix for it. – Kidney

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

Anallise

Answer 3

Yes its changed to light blue.

Marianmariana

Yeah i also see that change. – Paratyphoid

Answer 4

Try this, it worked for me

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: all 5000s ease-in-out 0s;
  transition-property: background-color, color;
}

Ranita