How to Remove Yellow Autofill Background in Form Fields (2026)

Seeing a yellow or pale blue background in your form fields? It’s the browser’s autofill highlight. Back in 2007 we traced it to the Google Toolbar’s autofill option. That toolbar is long gone, but the same look now comes from Chrome, Edge, Safari and Firefox autofill. Here’s how to remove the yellow autofill background as a visitor or a web designer.

Quick answer: The yellow (or light blue) colour appears when the browser autofills saved names, emails, addresses or passwords. Visitors can turn off autofill in browser settings. Web designers can’t simply change background-color, because browsers set it with !important, so use a large inset box-shadow on input:-webkit-autofill to paint over it.

Why form fields turn yellow

When a browser fills a field from saved data, it marks it so you know the value wasn’t typed by you. Chrome and Edge use a pale blue/yellow tint, Safari uses yellow, and Firefox uses a light yellow. The tint disappears as soon as you edit the field.

• It only shows on fields that match saved data, so some fields turn yellow and others don’t.
• It’s not caused by your theme’s CSS, so tweaking the normal input styles won’t remove it.
• In 2007 the Google Toolbar for IE and Firefox did the same thing with its own Autofill feature.

Remove the yellow background as a visitor

If the colour bothers you on your own computer, turn off or clean up autofill:

• Chrome: Settings > Autofill and passwords. Turn off addresses or payment methods, or delete individual saved entries.
• Edge: Settings > Profiles > Personal info and Passwords.
• Firefox: Settings > Privacy & Security > Forms and Autofill.
• Safari: Settings > AutoFill, then untick the types you don’t want.

Turning off password autofill isn’t recommended if you rely on a password manager; the tint is harmless.

Remove yellow autofill background with CSS

As MDN notes, Chrome sets the autofill background with !important, so a normal background-color rule doesn’t work. The reliable trick is an inset shadow that covers the field:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
  -webkit-text-fill-color: #222222;
  caret-color: #222222;
}

Change #ffffff to your field background and #222222 to your text colour. For dark mode, use your dark background colour instead.

The standard :autofill selector

The newer standard pseudo-class is :autofill. It works the same way, but support is still limited, so keep the -webkit-autofill version too. See MDN’s :autofill reference (external site).

Delay the colour with a transition

Another common trick is a very long background transition, so the autofill colour never visibly fades in:

input:-webkit-autofill {
  transition: background-color 9999s ease-out 0s;
}

Should you remove the yellow autofill background?

The highlight tells users a field was filled automatically, which helps them spot a wrong saved address. If you hide it, keep clear labels and good contrast so the form stays accessible. Avoid autocomplete="off" just to hide the colour: browsers often ignore it for logins, and it makes forms harder to fill.

FAQ

Why are only some of my form fields yellow?

Only the fields the browser filled from saved data get the highlight. Fields you typed in stay normal.

Why doesn’t background-color remove the autofill colour?

Chrome applies its autofill background with !important. Use an inset box-shadow to cover it instead.

Does the Google Toolbar still cause yellow fields?

No. Google Toolbar was discontinued years ago. Today the colour comes from the browser’s built-in autofill.