CSS, How to Remove the Yellow Background Color on Input Fields

Have you wondered why some browsers add a hideous yellow background color to autofill input fields on some websites? I can’t tell you why they do it, but I’ll tell you how to get rid of this blasphemy, fast.

Make sure there are no children present before you move on.

A login form with autofilled input values and an ugly yellow background color
Disgusting!

Why is this a “problem”? Well, it might not be, if for whatever reason your design’s color palette goes well with a snot-toned yellow.

A chart showing different snot colors

By the way, this is a Webkit (Chrome, Safari and many other browsers) specific problem. FireFox uses a white background color.

The following CSS code will add a white background color to autofill input fields in Webkit browsers:

input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0px 9999px white;
}
Add this right after your CSS Normalize or CSS reset styles (if you use any).

Note: you should of course use whatever color on inputs that aligns with your brand/color palette. I’m not suggesting that it should be white.

The result:

A login form with autofilled input values and and a clean white background color
Glorious!

Blasphemy has been conquered. Your design just got a bit cleaner.


Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Kofi

Share & Discuss on