:autofill CSS Pseudo Class

The :autofill pseudo-class matches form controls that the user agent has automatically populated with stored credentials or remembered form data. It’s applied when the browser fills a control (usually on page load or when the user selects a saved entry) so you can style those controls differently from manually-entered values.

What it targets and when it applies

• It generally applies to form controls such as input elements (and similar text-entry controls) after the browser fills them.
• The pseudo-class reflects the browser’s autofill state, not whether the value was programmatically set by script; some browsers only set the state when their internal autofill mechanism populates the control.
• The state typically remains while the autofilled value is present; editing, clearing, or the browser deciding the field is no longer autofilled will remove the pseudo-class.

Styling notes and gotchas

• The pseudo-class behaves like any other pseudo-class in selectors and affects specificity as expected.
• Styles are not inherited from parent elements simply because a child is autofilled; you must target the autofilled control.
• Many browsers apply their own autofill styling (for example a background color). That UA styling can be hard to override with simple background rules; techniques like using an inset box-shadow or using text-fill color are commonly used to override visual UA defaults.
• Transitions on properties overridden by the browser’s autofill may not animate as expected. A common workaround is to trigger a small animation on the autofilled selector to force repaint or to apply the final styling immediately.
• Rely on :autofill for visual affordances instead of trying to detect autofill in JavaScript; browsers may restrict programmatic detection for privacy reasons.

Accessibility and behavior considerations

• Autofill does not change the semantics of the control; ensure labels and ARIA are correct so autofilled values remain accessible.
• Don’t hide important contrast when styling autofilled fields - autofill can create unexpected color combinations; keep sufficient contrast for readability.

Typical patterns and examples

Simple visual highlight for autofilled controls:

input:autofill,
textarea:autofill {
  background-color: #e6f7ff;
  border-color: #66b3ff;
}

Override UA background by using an inset box-shadow and ensure readable text color:

input:autofill {
  box-shadow: 0 0 0 1000px white inset; /* hides UA background */
  -webkit-text-fill-color: #111;        /* helps override some UAs */
  transition: background-color 200ms ease;
}

Style when an autofilled field also has focus (combine with a focused state):

input:autofill:focus,
input:autofill:hover {
  outline: 2px solid #4aa3ff;
  box-shadow: 0 0 0 1000px #fff inset;
}

Force a repaint/animation workaround if your transitions aren’t applied by the UA:

@keyframes autofill-repaint { from { opacity: .99; } to { opacity: 1; } }
input:autofill {
  animation-name: autofill-repaint;
  animation-duration: 0.01s;
}

Interactions with other styling hooks

• You can combine :autofill with other selectors (for example :focus) to create compound states such as focused-and-autofilled.
• Placeholder styling and autofill can interact visually; consider how autofill styling affects or conflicts with ::placeholder color and spacing.

Best practices

• Test autofill behavior with actual saved credentials/data rather than mock values.
• Use non-invasive visual cues (border, subtle background) so autofill remains obvious but accessible.
• Prefer CSS solutions for visual changes; avoid relying on JavaScript detection of autofill because of privacy-limiting behavior in some browsers.