How to Style Autofilled Inputs with CSS :autofill

The CSS :autofill pseudo-class allows developers to target and customize form inputs that have been automatically populated by a browser's autofill feature. By default, browsers like Chrome, Safari, and Edge apply their own distinct styling—typically a pale yellow or light blue background with dark text—overriding custom application themes. Understanding how :autofill operates enables you to override these default browser styles, preserve your UI consistency, and maintain accessible contrast ratios.

The Default Autofill Behavior

When a user selects a saved credential or contact entry, the browser flags the <input> element with an internal state. Browsers apply high-priority User-Agent stylesheet rules to indicate that data was automatically inserted. In Chromium and WebKit-based browsers, this was traditionally handled via the vendor-prefixed :-webkit-autofill pseudo-class.

The modern CSS Selectors Level 4 specification introduced :autofill as the standard, non-prefixed selector. Most modern browsers now support both the standard :autofill and the legacy :-webkit-autofill pseudo-class.

Overriding the Autofill Background

Browsers impose restrictions on which properties can be modified during autofill to prevent malicious sites from disguising auto-filled sensitive data. Because of these restrictions, standard background-color declarations are often overridden or ignored by Chromium-based browsers.

To reliably style the background, developers use a large internal box-shadow:

/* Standard and WebKit compatibility */
input:autofill,
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #1e1e2e inset;
  box-shadow: 0 0 0px 1000px #1e1e2e inset;
  transition: background-color 5000s ease-in-out 0s;
}

The box-shadow trick renders an inset shadow over the browser's default background color, matching it to your form's background (in this example, a dark theme color #1e1e2e). The long transition delay serves as a secondary fallback to prevent the native background color from animating into view.

Customizing Autofilled Text and Borders

While standard color declarations might be ignored by some rendering engines on autofilled elements, the text color can be explicitly controlled using -webkit-text-fill-color.

Borders, outline, and font properties can be adjusted directly with standard CSS rules:

input:autofill,
input:-webkit-autofill {
  /* Set text color */
  -webkit-text-fill-color: #ffffff;
  
  /* Set caret (cursor) color */
  caret-color: #ffffff;
  
  /* Border styling */
  border: 1px solid #6c7086;
  border-radius: 6px;
  
  /* Font consistency */
  font-family: inherit;
  font-size: 1rem;
}

Resetting to Transparent Backgrounds

If your input elements sit on top of gradients, images, or complex backgrounds where a solid box-shadow cannot blend in, use a CSS transition trick to indefinitely delay the browser's background fill:

input:autofill,
input:-webkit-autofill {
  transition: background-color 600000s 0s, color 600000s 0s;
}

By pushing the background color transition hundreds of hours into the future, the element remains visually transparent while retaining the autofilled content.

Best Practices

• Always combine selectors: Pair :autofill with :-webkit-autofill in separate or grouped rules to ensure consistent behavior across Firefox, Safari, Chrome, and older browser versions.
• Maintain contrast: Browser defaults exist to inform users that sensitive data was pre-filled. If you alter the background color, verify that text meets WCAG contrast requirements.
• Inspect the state: You can test these styles in browser developer tools (such as Chrome DevTools) by toggling the :autofill pseudo-class state in the Elements panel.