{"id":6431,"date":"2010-05-20T04:49:05","date_gmt":"2010-05-20T11:49:05","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=6431"},"modified":"2010-05-20T04:49:05","modified_gmt":"2010-05-20T11:49:05","slug":"autocomplete-off","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/html\/autocomplete-off\/","title":{"rendered":"Turn Off Autocomplete for Input"},"content":{"rendered":"<p>Just use the autocomplete attribute:<\/p>\n<pre><code class=\"html\">&lt;input name=\"q\" type=\"text\" autocomplete=\"off\"\/&gt;<\/code><\/pre>\n<p>This would be useful when a text input is one-off and unique. Like a CAPTCHA input, one-time use codes, or for when you have built your own auto-suggest\/auto-complete feature and need to turn off the browser default.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Just use the autocomplete attribute: &lt;input name=&#8221;q&#8221; type=&#8221;text&#8221; autocomplete=&#8221;off&#8221;\/&gt; This would be useful when a text input is one-off and unique. Like a CAPTCHA input, one-time use codes, or for when you have built your own auto-suggest\/auto-complete feature and need to turn off the browser default.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3231,"menu_order":0,"comment_status":"open","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":6431,"position":0},"title":":autofill","date":"September 27, 2022","format":false,"excerpt":"The :auto-fill pseudo-class in CSS allows us to style <input> 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":240781,"url":"https:\/\/css-tricks.com\/snippets\/css\/change-autocomplete-styles-webkit-browsers\/","url_meta":{"origin":6431,"position":1},"title":"Change Autocomplete Styles in WebKit Browsers","date":"April 21, 2016","format":false,"excerpt":"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\u2026","rel":"","context":"With 39 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18880,"url":"https:\/\/css-tricks.com\/snippets\/css\/turn-off-number-input-spinners\/","url_meta":{"origin":6431,"position":2},"title":"Turn Off Number Input Spinners","date":"October 11, 2012","format":false,"excerpt":"WebKit desktop browsers add little up down arrows to number inputs called spinners. You can turn them off visually like this: input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } Note that some other functionality still exists, like being able to increment the number via the scroll wheel on a mouse.\u2026","rel":"","context":"With 78 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":333467,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/caret\/","url_meta":{"origin":6431,"position":3},"title":"caret","date":"January 27, 2021","format":false,"excerpt":"caret in CSS is a shorthand property that combines the caret-color and caret-shape properties into a single declaration. So, we get to write this: .element { caret: #ff7a18 underscore; } ...which is akin to writing this: .element { caret-color: #ff7a18; caret-shape: underscore; } That's a nice shortcut when you want\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14166,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/checked\/","url_meta":{"origin":6431,"position":4},"title":":checked","date":"February 17, 2013","format":false,"excerpt":"The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input () elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not\u2026","rel":"","context":"With 45 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154816,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-file-input-styling-webkitblink\/","url_meta":{"origin":6431,"position":5},"title":"Custom File Input Styling","date":"October 31, 2013","format":false,"excerpt":"If you're interested in Webkit\/Blink\/Chrome specific styling, there is a proprietary pseudo element to hide, and then use an also non-standard psudeo-on-an-input: <input class=\"custom-file-input\" type=\"file\"> .custom-file-input::-webkit-file-upload-button { visibility: hidden; } .custom-file-input::before { content: 'Select some files'; display: inline-block; background: linear-gradient(top, #f9f9f9, #e3e3e3); border: 1px solid #999; border-radius: 3px; padding: 5px\u2026","rel":"","context":"In \"file input\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/6431"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=6431"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/6431\/revisions"}],"predecessor-version":[{"id":6432,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/6431\/revisions\/6432"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3231"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=6431"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=6431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}