The autofill pseudo-class matches an input whose value was filled by the browser, subject to browser rules. User editing can end that state, and user agents may restrict which autofill styles authors can override.
Make this comfortable
CSS autofill state: retain contrast when the browser fills a control
When to use it
A billing form can look correct during manual typing but unreadable when a browser fills saved details over a themed input. Keep a safe baseline of text, background, border, and focus styles. Use autofill only for a modest border cue rather than fighting the browser's protected foreground or background rendering. The sample preserves the normal border as fallback. Test saved data in more than one browser, both color schemes, and a focused autofilled field. Do not disable autofill just to avoid styling work; it saves time and supports many users. The form still needs labels, correct autocomplete tokens, and server validation of submitted values.
.billing-field { border: 2px solid #41637c; color: #173148; background: #fff; }
.billing-field:autofill { border-color: #175b44; }
.billing-field:focus-visible { outline: 3px solid #175b44; outline-offset: 2px; }Cost and verification
Autofill styling has negligible layout cost, but browser restrictions make screenshot-only review unreliable. Some user-agent styles cannot be overwritten with an ordinary declaration. Verify the actual filled text contrast and caret, not just the computed border color. A filled value is not automatically valid: dates, addresses, and account identifiers can be stale. Keep the validation path intact. Avoid overly specific hacks that depend on one browser's internal stylesheet; they can break when the browser updates or when forced colors are active.
Common Mistakes
- Do not disable browser autofill to avoid a color mismatch.
- Do not assume an autofilled value is valid or current.
- Do not depend on overriding every user-agent autofill color.
Connected lessons
css
reference
web