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

a month ago

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?
Let me know in the comments!


Comments

ptrdo
ptrdo
22 days ago

Actually, the yellow is not just some flippant intent to nauseate, but actually a deliberate decision to improve the legibility of often crucial information. Black text against a yellow field provides pronounced clarity and visibility, which is supported by scientific study, and the reasoning behind the most critical of cautionary freeway signage (turns ahead, road conditions, and crossings).

David McStacker
David McStacker
21 days ago

Haha, I know it’s not there to piss people off. My post was a bit tongue in cheek.

“Black text against a yellow field provides pronounced clarity and visibility”

Doesn’t that depend on the rest of the design? White / black is about as clear of a contrast as you can use.

“and the reasoning behind the most critical of cautionary freeway signage (turns ahead, road conditions, and crossings).”

I did some searching on this, and you are right.

That being said, I don’t see how autofill input fields are even in the same ballpark as critical signage. Also, the type of yellow you are referring to (on critical road signs) is a completely different yellow than the “nauseating” yellow some browsers use.

Lastly, if it’s such an important detail (to use that yellow color), I wonder why Firefox doesn’t find it necessary (they use white).

I appreciate your feedback. It got me thinking. Although I don’t agree with everything you said, I understand where you’re coming from.

Cheers!

ptrdo
ptrdo
8 days ago

Many people do consider their name, address, phone, and credit card numbers to be "critical information", and so will appreciate the added clarity when inputting and verifying them—especially people with older eyes and smaller screens. Also, regular people (not developers) tend to consistently use the same browser, and so become accustomed with the background of input fields which require crucial information, whether that be the white default of Firefox or light yellow of practically every other browser. Imposing something else for the sole reason of some arbitrary color scheme can be confusing to users, many of whom don't understand why these things would be different on one site from virtually all others.

I appreciate you coming back to reply!

This:

“Also, regular people (not developers) tend to consistently use the same browser, and so become accustomed with the background of input fields which require crucial information, whether that be the white default of Firefox or light yellow of practically every other browser.”

Is a really good point. People use best what they use most. Familiarity builds trust.

I still believe that you don’t have to use the browser defaults to provide clarity as far as what a UI element is about (even if people are used to it).

I try my best to not assume anything about users in general, but I do make the general assumption that people are smart enough to realize that not all websites look exactly the same.

Airbnb, one of the biggest platforms in the world seems to agree with that sentiment, as they have decided (like many others) to overwrite the default background color on inputs (to white) in Chrome and other browsers.

Yes, I’m appealing to authority, which doesn’t make me right, but honestly, considering how many millions of users Airbnb has and how many talented people designs for them, I’d be shocked if they hadn’t considered your point of view.

Lastly, you say:

“Imposing something else for the sole reason of some arbitrary color scheme can be confusing to users”

Who is imposing an arbitrary color scheme? Why on earth would you assume that is what I am suggesting?

I would only change the background input color to something that aligns with the branding of whatever product I’m working on.

My article was about how to achieve a consistent baseline (white) which you can then change to something that makes sense for your product.

It’s too bad you had to end your otherwise informative comment with a baseless assumption.

waarissyb
waarissyb
22 days ago

Just like you shouldn’t remove outline on links (https://a11yproject.com/posts/never-remove-css-outlines/), you shouldn’t disable autofill for the user. It’s a feature of the browser, not a problem. If it doesn’t work with your color palette, I understand that you want to change it. But by removing the color you’re disabling hinting/signalling for the user, probably causing confusion for the user.

I believe that the problem would be rather your color palette. You should adapt your design instead of writing CSS for certain browsers.

David McStacker
David McStacker
21 days ago

“you shouldn’t disable autofill for the user.”

This doesn’t disable autofill for the user (I would never suggest that). This post talks about changing the background color from yellow to white.

I don’t understand this part of your comment. Did I misunderstand you? :-)

“But by removing the color you’re disabling hinting/signalling for the user, probably causing confusion for the user.”

Do you have any data to back that claim up?

Also, if this is a serious problem, why does FireFox use a white background? Serious question.

If it doesn’t work with your color palette, I understand that you want to change it.

I think you’re right that one could use a better hint/signal for the user than a white background. A solution could be a different yellow color nuance that works well with the rest of the color palette.

You should adapt your design instead of writing CSS for certain browsers.

This CSS actually evens out an inconsistency across browsers. Similar to how normalize.css evens out inconsistencies in different browsers.

I don’t want my design to have one color in one browser (e.g. yellow) and another 'color' in another (e.g. white).

But I’d agree that you can probably use something better than a plain white for the background color.

Thank you for commenting!