How to Change the Autofill Background Color of an Input (CSS, Tailwind)

Why autofilled inputs look yellow or blue

When the browser fills a saved email, password or address, Chrome, Edge and Safari don't just set the value — they paint the field with a user-agent style on input:-webkit-autofill. That rule sets background-color (often a light yellow or blue, depending on OS theme) with !important, so your own background-color on the input is ignored. Safari follows the same WebKit pattern. That is why a carefully styled white or dark form suddenly shows a bright patch after autofill.

The tint is not coming from your CSS file; it is enforced so users can spot which fields the browser filled. For branded login and checkout forms you still want autofill — you just need a override that wins without turning autofill off.

The fix: inset box-shadow and text fill color

Because background-color loses to the user-agent rule, the usual workaround is to paint over the forced background with a huge inset shadow. Match your input's real background and text colors, and include :hover, :focus and :active so the look stays consistent when the user tabs into the field:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: #111;
  caret-color: #111;
}

The shadow is large enough to cover the entire input box, so it visually replaces the browser's yellow or blue fill. -webkit-text-fill-color fixes text that would otherwise stay low-contrast on the forced background, and caret-color keeps the insertion point visible.

Here is a minimal form you can paste on any site. It posts to splitforms so submissions land in your inbox without a custom backend:

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <button type="submit">Send</button>
</form>

<style>
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #111;
    caret-color: #111;
  }
</style>

Get a free access key to try it.

Optional: delay the forced background with transition

Some teams add an extremely long background-color transition on the autofill pseudo-class. WebKit still applies its background, but the transition effectively keeps your color on screen for a long time. It is a secondary trick; the inset shadow above is the reliable fix:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: #111;
  caret-color: #111;
  transition: background-color 5000s ease-in-out 0s;
}

Treat this as extra insurance alongside the shadow, not a replacement for it.

Use :autofill in a separate rule (Firefox)

The standardized :autofill pseudo-class works in Firefox and current Chromium and Safari. You should still style :-webkit-autofill for WebKit-specific text fill behavior. Important: put :autofill in its own rule, not in the same comma-separated selector list as :-webkit-autofill. If a browser does not recognize one selector in a list, it drops the entire rule — so mixing them can leave Firefox or older engines with no styles at all.

/* WebKit / Blink */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: #111;
  caret-color: #111;
}

/* Firefox and standard :autofill — separate rule */
input:autofill {
  box-shadow: 0 0 0 1000px #fff inset;
  color: #111;
}

Tailwind: autofill variants

Tailwind v3+ lets you target the autofill pseudo-class with the autofill: variant. Use an arbitrary inset shadow for the fill and an arbitrary property for WebKit text color:

<input
  type="email"
  name="email"
  autoComplete="email"
  className="rounded-lg border border-gray-300 px-3 py-2 autofill:shadow-[inset_0_0_0px_1000px_rgb(255,255,255)] autofill:[-webkit-text-fill-color:#111]"
/>

In plain HTML, use class instead of className and autocomplete instead of autoComplete. If every field on the site should match, copy the CSS block from the fix section into your global stylesheet once instead of repeating classes.

Dark mode and prefers-color-scheme

On dark forms, swap the inset shadow color to your surface token and lighten the text. You can scope it with a class or respect the user's system theme:

@media (prefers-color-scheme: dark) {
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset;
    box-shadow: 0 0 0 1000px #1a1a1a inset;
    -webkit-text-fill-color: #f5f5f5;
    caret-color: #f5f5f5;
  }

  input:autofill {
    box-shadow: 0 0 0 1000px #1a1a1a inset;
    color: #f5f5f5;
  }
}

If the page uses a manual dark theme class instead of system preference, duplicate the same colors under .dark input:-webkit-autofill (and .dark input:autofill) so autofilled fields match toggled dark mode too.

Detect autofill in JavaScript (floating labels)

Browsers do not fire a dedicated "autofill" event, but you can detect when the autofill pseudo-class applies by animating a custom property and listening for animationstart. That lets floating labels jump up when the browser fills a field the user never typed in:

@keyframes onAutoFillStart {
  from { opacity: 1; }
  to { opacity: 1; }
}

input:-webkit-autofill {
  animation-name: onAutoFillStart;
  animation-duration: 0.001s;
}

document.querySelectorAll('input').forEach((input) => {
  input.addEventListener('animationstart', (e) => {
    if (e.animationName === 'onAutoFillStart') {
      input.classList.add('is-autofilled');
    }
  });
});

Toggle your label class when .is-autofilled is present. Re-check on submit as well — autofill timing varies by browser — using the patterns in how to validate an HTML form with JavaScript.

Don't turn autofill off to fix the color

Setting autocomplete="off" or random strings to hide the yellow background hurts real users: fewer one-tap fills on login, checkout and contact forms. Style the autofill state instead. Use correct tokens so the browser fills the right fields — see the HTML autocomplete attribute guide and the autocomplete reference for values that password managers and mobile keyboards understand.

FAQ

References: MDN: :autofill and MDN: :-webkit-autofill.