{"id":13911,"date":"2011-08-31T19:35:29","date_gmt":"2011-09-01T02:35:29","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=13911"},"modified":"2020-11-20T14:47:05","modified_gmt":"2020-11-20T22:47:05","slug":"appearance","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/a\/appearance\/","title":{"rendered":"appearance"},"content":{"rendered":"\n<p>The <code>appearance<\/code> property is used to display an element using a platform-native styling based on the users&#8217; operating system&#8217;s theme.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.thing {\n   -webkit-appearance: value;\n   -moz-appearance:    value;\n   appearance:         value;\n}<\/code><\/pre>\n\n\n\n<p class=\"explanation\">This is <a href=\"https:\/\/twitter.com\/bocoup\/status\/1260698133111156736\" rel=\"noopener\">starting to be unprefixed<\/a>, which is great because the cross-browser story here is very complicated. <\/p>\n\n\n\n<p>The <code>appearance<\/code> property is used for one of two reasons:<\/p>\n\n\n\n<ol><li>To apply platform-specific styling to an element that doesn&#8217;t have it by default<\/li><li>To remove platform-specific styling to an element that does have it by default<\/li><\/ol>\n\n\n\n<p>For instance, inputs with a <code>type=search<\/code> in WebKit browsers by default have rounded corners and <a href=\"https:\/\/css-tricks.com\/webkit-html5-search-inputs\/\">are very strict in what you can alter via CSS<\/a>. If you don&#8217;t want that styling, you can remove it in one fell swoop with appearance.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">input[type=search] {\n  -webkit-appearance: none;\n}<\/code><\/pre>\n\n\n\n<p>Or you could take a input with type=text and just make it look like a search input:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">input[type=text] {\n  -webkit-appearance: searchfield;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VYyxRe\" src=\"\/\/codepen.io\/anon\/embed\/VYyxRe?height=450&amp;theme-id=1&amp;slug-hash=VYyxRe&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VYyxRe\" title=\"CodePen Embed VYyxRe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><script async=\"\" src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"webkit-values\">WebKit values<\/h3>\n\n\n<ul><li>checkbox<\/li><li>radio<\/li><li>push-button<\/li><li>square-button<\/li><li>button<\/li><li>button-bevel<\/li><li>listbox<\/li><li>listitem<\/li><li>menulist<\/li><li>menulist-button<\/li><li>menulist-text<\/li><li>menulist-textfield<\/li><li>scrollbarbutton-up<\/li><li>scrollbarbutton-down<\/li><li>scrollbarbutton-left<\/li><li>scrollbarbutton-right<\/li><li>scrollbartrack-horizontal<\/li><li>scrollbartrack-vertical<\/li><li>scrollbarthumb-horizontal<\/li><li>scrollbarthumb-vertical<\/li><li>scrollbargripper-horizontal<\/li><li>scrollbargripper-vertical<\/li><li>slider-horizontal<\/li><li>slider-vertical<\/li><li>sliderthumb-horizontal<\/li><li>sliderthumb-vertical<\/li><li>caret<\/li><li>searchfield<\/li><li>searchfield-decoration<\/li><li>searchfield-results-decoration<\/li><li>searchfield-results-button<\/li><li>searchfield-cancel-button<\/li><li>textfield<\/li><li>textarea<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"mozilla-values\">Mozilla values<\/h3>\n\n\n<ul><li>none                                <\/li><li>button                              <\/li><li>checkbox                            <\/li><li>checkbox-container                  <\/li><li>checkbox-small                      <\/li><li>dialog                              <\/li><li>listbox                             <\/li><li>menuitem                            <\/li><li>menulist                            <\/li><li>menulist-button                     <\/li><li>menulist-textfield                  <\/li><li>menupopup                           <\/li><li>progressbar                         <\/li><li>radio                               <\/li><li>radio-container                     <\/li><li>radio-small                         <\/li><li>resizer                             <\/li><li>scrollbar                           <\/li><li>scrollbarbutton-down                <\/li><li>scrollbarbutton-left                <\/li><li>scrollbarbutton-right               <\/li><li>scrollbarbutton-up                  <\/li><li>scrollbartrack-horizontal           <\/li><li>scrollbartrack-vertical             <\/li><li>separator                           <\/li><li>statusbar                           <\/li><li>tab                                 <\/li><li>tab-left-edge Obsolete              <\/li><li>tabpanels                           <\/li><li>textfield                           <\/li><li>textfield-multiline                 <\/li><li>toolbar                             <\/li><li>toolbarbutton                       <\/li><li>toolbox                             <\/li><li>-moz-mac-unified-toolbar            <\/li><li>-moz-win-borderless-glass           <\/li><li>-moz-win-browsertabbar-toolbox      <\/li><li>-moz-win-communications-toolbox     <\/li><li>-moz-win-glass                      <\/li><li>-moz-win-media-toolbox              <\/li><li>tooltip                             <\/li><li>treeheadercell                      <\/li><li>treeheadersortarrow                 <\/li><li>treeitem                            <\/li><li>treetwisty                          <\/li><li>treetwistyopen                      <\/li><li>treeview                            <\/li><li>window                              <\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"resources\">Resources<\/h3>\n\n\n<ul><li><a href=\"https:\/\/developer.mozilla.org\/en\/CSS\/-moz-appearance\" rel=\"noopener\">Mozilla Docs for -moz-appearance<\/a><\/li><li><a href=\"http:\/\/trentwalton.com\/2010\/07\/14\/css-webkit-appearance\/\" rel=\"noopener\">Trent Walton on Webkit Appearance<\/a><\/li><li><a href=\"http:\/\/www.shauninman.com\/archive\/2010\/04\/22\/disable_the_default_inner_shadow_of_search_inputs_on_the_ipad\" rel=\"noopener\">Shaun Inman on Disabling Inner Text Shadow of Text Inputs on iPad<\/a><\/li><li><a href=\"http:\/\/www.w3.org\/TR\/css3-ui\/#appearance\" rel=\"noopener\">CSS3 Spec<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-appearance\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">83*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">80<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">83*<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">15.4<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">15.4<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The appearance property is used to display an element using a platform-native styling based on the users&#8217; operating system&#8217;s theme. This is starting to be unprefixed, which is great because the cross-browser story here is very complicated. The appearance property is used for one of two reasons: To apply platform-specific styling to an element that [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13712,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.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":[15202,595],"acf":[],"jetpack-related-posts":[{"id":307236,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/contain\/","url_meta":{"origin":13911,"position":0},"title":"contain","date":"May 8, 2020","format":false,"excerpt":"The contain property in CSS indicates to the browser that the element and its descendants are considered independent of the document tree as much as possible. This potentially provides performance benefits with calculations in layout, style, paint, size, or any combination for a limited area of the DOM and not\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376465,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/color-scheme\/","url_meta":{"origin":13911,"position":1},"title":"color-scheme","date":"January 27, 2023","format":false,"excerpt":"You know how we have \u201cdark mode\u201d and \u201clight mode\u201d these days? Browsers also have \"dark\" and \"light\" color schemes baked into their default styles. The CSS color-scheme property lets the browser use (or choose) to display certain elements with its dark or light default styling. :root { color-scheme: light\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":14063,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/letter-spacing\/","url_meta":{"origin":13911,"position":2},"title":"letter-spacing","date":"March 12, 2013","format":false,"excerpt":"The letter-spacing property controls the amount of space between each letter in a given element or block of text. Values supported by letter-spacing include font-relative values (em, rem), absolute values (px) and the normal property, which resets to the font's default. Using font-relative values is recommended, so that the letter-spacing\u2026","rel":"","context":"With 18 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":346652,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-style\/","url_meta":{"origin":13911,"position":3},"title":"outline-style","date":"August 16, 2021","format":false,"excerpt":"The outline-style CSS property specifies the style of an element's outline. What\u2019s an outline? An outline is a line that is drawn around elements \u2014 outside the border edge \u2014 that is used for accessibility or decoration purposes when that element is in focus. button { outline-style: dashed; } outline-style\u2026","rel":"","context":"In \"outline\"","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":321460,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/paint-order\/","url_meta":{"origin":13911,"position":4},"title":"paint-order","date":"September 18, 2020","format":false,"excerpt":"The CSS paint-order property sets the order that SVG shapes and text are drawn, including the fill, stroke, and any markers that might be in use. By default, those attributes are drawn in that very order: fill, stroke, and markers. This property allows us to switch it up so we\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13827,"url":"https:\/\/css-tricks.com\/snippets\/css\/force-file-upload-input-button-to-right-side-in-webkit\/","url_meta":{"origin":13911,"position":5},"title":"Force WebKit&#8217;s File Upload Input Button to the Right","date":"August 25, 2011","format":false,"excerpt":"Firefox and IE have the \"choose file\" button to the right of the filepath, while WebKit puts it on the left. This makes WebKit put it on the right as well. input[type=\"file\"]{ -webkit-appearance: none; text-align: left; -webkit-rtl-ordering: left; } input[type=\"file\"]::-webkit-file-upload-button{ -webkit-appearance: none; float: right; margin: 0 0 0 10px; border:\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13911"}],"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\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=13911"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13911\/revisions"}],"predecessor-version":[{"id":326155,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13911\/revisions\/326155"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13712"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13911"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}