{"id":240781,"date":"2016-04-21T08:31:06","date_gmt":"2016-04-21T15:31:06","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=240781"},"modified":"2019-04-26T05:57:23","modified_gmt":"2019-04-26T12:57:23","slug":"change-autocomplete-styles-webkit-browsers","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/change-autocomplete-styles-webkit-browsers\/","title":{"rendered":"Change Autocomplete Styles in WebKit Browsers"},"content":{"rendered":"

We got a nice tip from Lydia Dugger<\/a> via email with a method for changing the styles that WebKit browsers apply to form fields that have been autocompleted.<\/p>\n

What we mean by autocomplete<\/h3>\n

Many browsers (including Chrome and Safari) provide a setting that allows users to automatically fill in details for common form fields. You have seen this when completing a form that asks for things like name, address, and email.<\/p>\n

The catch is that users must have enabled this setting in order for this snippet to be effective. If the setting is enabled, then WebKit browsers will style the fields it has autocompleted for the user, like so:<\/p>\n

\"\"<\/figure>\n

Notice how the autocompleted fields have a yellow background? That’s what we’re referring to and going to change with this snippet.<\/p>\n

The Snippet<\/h3>\n

We can use the -webkit-autofill<\/code> pseudo-selector to target those fields and style them as we see fit. The default styling only affects the background color, but most other properties apply here, such as border<\/code> and font-size<\/code>. We can even change the color of the text using -webkit-text-fill-color<\/code> which is included in the snippet below.<\/p>\n

\/* Change Autocomplete styles in Chrome*\/\r\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover, \r\ninput:-webkit-autofill:focus,\r\ntextarea:-webkit-autofill,\r\ntextarea:-webkit-autofill:hover,\r\ntextarea:-webkit-autofill:focus,\r\nselect:-webkit-autofill,\r\nselect:-webkit-autofill:hover,\r\nselect:-webkit-autofill:focus {\r\n  border: 1px solid green;\r\n  -webkit-text-fill-color: green;\r\n  -webkit-box-shadow: 0 0 0px 1000px #000 inset;\r\n  transition: background-color 5000s ease-in-out 0s;\r\n}<\/code><\/pre>\n
Demo<\/h3>\n
See the Pen Change Autocomplete Styles in WebKit<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
We got a nice tip from Lydia Dugger via email with a method for changing the styles that WebKit browsers apply to form fields that have been autocompleted. What we mean by autocomplete Many browsers (including Chrome and Safari) provide a setting that allows users to automatically fill in details for common form fields. You […]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":373609,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/autofill\/","url_meta":{"origin":240781,"position":0},"title":":autofill","date":"September 27, 2022","format":false,"excerpt":"The :auto-fill pseudo-class in CSS allows us to style  elements that contain content auto-filled by the browser. 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? Notice how the autocompleted\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":194420,"url":"https:\/\/css-tricks.com\/snippets\/sass\/custom-scrollbars-mixin\/","url_meta":{"origin":240781,"position":1},"title":"Custom Scrollbars Mixin","date":"January 28, 2015","format":false,"excerpt":"Scrollbars are one of those UI components that are present on almost every page of the internet, yet we (developers) have little to no control over it. Some browsers give us the ability to customize their appearance but for most browsers including Firefox it just is not possible. There has\u2026","rel":"","context":"In \"scrollbars\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198851,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-style\/","url_meta":{"origin":240781,"position":2},"title":"text-decoration-style","date":"April 3, 2015","format":false,"excerpt":"The text-decoration-style property sets the style of the underline on links and the underline, overline, or line-through on any text with text-decoration applied. a { text-decoration-style: solid; } Values solid: the default. Decoration is a single solid line.double: Decoration is a pair of solid lines.dotted: Decoration is a dotted line.dashed:\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198607,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-color\/","url_meta":{"origin":240781,"position":3},"title":"text-decoration-color","date":"April 3, 2015","format":false,"excerpt":"The text-decoration-color property sets the color of the underline, overline, or line-through on text with the text-decoration property applied. It can also set the underline color on links. a { text-decoration-color: #E18728; } Values text-decoration-color can inherit or accept any CSS color value, including named colors, HEX colors, RGBa, and\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350365,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/accent-color\/","url_meta":{"origin":240781,"position":4},"title":"accent-color","date":"August 26, 2021","format":false,"excerpt":"The accent-color property in CSS is capable of re-tinting the accented color of form controls provided by the browser's default styles with a custom color value. .element { accent-color: #f8a100; } accent-color is defined in CSS Basic User Interface Module Level 4, which is currently in Working Draft. That means\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14101,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar\/","url_meta":{"origin":240781,"position":5},"title":"scrollbar","date":"September 6, 2011","format":false,"excerpt":"A brief history of styling scrollbars: It used to be a thing only Internet Explorer could do (ancient versions) with stuff like -ms-scrollbar-base-color. These do not exist anymore.Then WebKit-based browser engines got on board with stuff like ::-webkit-scrollbar. That's what this Alamanac entry mostly covers, as it works across the\u2026","rel":"","context":"In \"scrollbars\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/240781"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=240781"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/240781\/revisions"}],"predecessor-version":[{"id":286924,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/240781\/revisions\/286924"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=240781"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=240781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}