{"id":373609,"date":"2022-09-27T06:06:00","date_gmt":"2022-09-27T13:06:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=373609"},"modified":"2022-09-29T06:06:24","modified_gmt":"2022-09-29T13:06:24","slug":"autofill","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/autofill\/","title":{"rendered":":autofill"},"content":{"rendered":"\n

The :auto-fill<\/code> pseudo-class in CSS allows us to style <input><\/code> elements that contain content auto-filled by the browser.<\/p>\n\n\n\n

Take a new user registration form as an example. Have you ever clicked or tapped into a field and seen a dropdown of suggestions for what to enter?<\/p>\n\n\n\n

\"Animated<\/figure>\n\n\n\n

Notice how the autocompleted fields have a yellow background? That\u2019s how the browser styles a field when it contains auto-filled content. The :auto-fill<\/code> lets us override or extend that with our own styles.<\/p>\n\n\n\n\n\n\n\n

input:auto-fill { \n  outline: 5px solid rgb(0 0 0 \/ .5);\n}<\/code><\/pre>\n\n\n
When does autocompletion happen?<\/h3>\n\n\n
That\u2019s a bit of a tricky question because each browser has its own settings that allow a user to enable or disable auto-completion.<\/p>\n\n\n\n
\"Safari
Safari<\/figcaption><\/figure>\n\n\n\n
\"Auto-fill
Chrome<\/figcaption><\/figure>\n\n\n\n
\"Auto-fill
Firefox<\/figcaption><\/figure>\n\n\n\n
So, just because you set autocompletion styles on an input with :auto-fill<\/code> doesn\u2018t mean it\u2019ll actually happen. The user has to enable autocompletion in the browser settings for the feature to work and the styles to be applied.<\/p>\n\n\n\n
The other time autocompletion can happen is when the autocomplete<\/code> attribute is applied to a form input:<\/p>\n\n\n\n
<input id=\"name\" autocomplete=\"name\"><\/code><\/pre>\n\n\n\n
But the attribute is more guidance than a hard rule because there\u2018s no way to override the auto-fill browser setting directly in CSS if it\u2019s disabled. The HTML Living Standard seems to support that in a note<\/a>:<\/p>\n\n\n\n
One way such autofilling might happen is via the autocomplete<\/code> attribute, but user agents could autofill even without that attribute being involved.<\/p><\/blockquote>\n\n\n\n
And, in most cases, that appears to be the case \u2014 at least in our testing.<\/p>\n\n\n\n
The HTML autocomplete<\/code> attribute can be used to match certain fields using a token that is mapped to certain fields. See the specification for a full list of available tokens<\/a>.<\/p>\n\n\n
Overriding user agent :auto-fill<\/code> styles<\/h3>\n\n\n
Browsers often bring their own styling to the table. We call those user agent (UA) styles and they are the reason we have things like CSS resets<\/a> to override them for consistent cross-browser initial styles.<\/p>\n\n\n\n
We saw earlier that Chrome applies a light yellow background-color<\/code> to auto-filled content. Chrome\u2019s UA styles include:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
input:-internal-autofill-selected {\n    appearance: menulist-button;\n    background-image: none !important;\n    background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;\n    color: fieldtext !important;\n}<\/code><\/pre>\n\n\n\n
According to MDN<\/a>, overriding those styles is something we are unable to do in CSS, but this snippet from Geoff<\/a> seems to do the trick using an inset box-shadow<\/code> to change the background-color<\/code> while using -webkit-text-fill-color<\/code> to change the color of the text:<\/p>\n\n\n\n
input:-webkit-autofill,\ninput:-webkit-autofill:hover, \ninput:-webkit-autofill:focus {\n  -webkit-text-fill-color: #31b0dd;\n  -webkit-box-shadow: 0 0 0px 40rem #ffff inset;\n}<\/code><\/pre>\n\n\n\n