{"id":285700,"date":"2019-04-02T10:17:35","date_gmt":"2019-04-02T17:17:35","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=285700"},"modified":"2021-02-07T05:45:31","modified_gmt":"2021-02-07T13:45:31","slug":"scrollbar-color","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar-color\/","title":{"rendered":"scrollbar-color"},"content":{"rendered":"\n<p>The <code>scrollbar-color<\/code> property controls the two colors of a scrollbar: the <strong>thumb color<\/strong> and the <strong>track color<\/strong>. <code>scrollbar-color<\/code> is part of the <a href=\"https:\/\/drafts.csswg.org\/css-scrollbars-1\/#scrollbar-width\" rel=\"noopener\">CSS Working Group&#8217;s Scrollbars Module Level 1 draft<\/a>, which is still a work in progress as of this writing.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Prior to <code>scrollbar-color<\/code>, developers had no standard way to change the default appearance of a browser&#8217;s scrollbars without resorting to hiding the scrollbar via <code>overflow: hidden<\/code> and rendering JavaScript-based scrollbars or using <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar\/\">browser-prefixed scrollbar attributes<\/a>. With <code>scrollbar-color<\/code>, on the other hand, we can style a scrollbar to match a design without resorting to redoing browser functionality or using vendor prefixes.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.scrollable-element {\n  scrollbar-color: red yellow;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image align-center media-285721\" id=\"post-285721\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/custom-color-scrollbar.png?ssl=1\" alt=\"scrollbar with yellow track and red thumb\" data-recalc-dims=\"1\"\/><figcaption>Go wild with custom colors<\/figcaption><\/figure>\n\n\n\n<p><code>scrollbar-color<\/code> will also accept values of <code>dark<\/code> and <code>light<\/code> to match a user&#8217;s preferences if they&#8217;re using something like <a href=\"https:\/\/css-tricks.com\/dark-modes-with-css\/\">dark mode on Mac OSX<\/a>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.scrollable-element {\n  scrollbar-color: dark;\n}<\/code><\/pre>\n\n\n\n<p>As of March 2019, support for <code>dark<\/code> and <code>light<\/code> values is not available in any browser. <code><\/code> is supported in Firefox. See the <a href=\"#browser-support\">browser support section<\/a> below for details.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">scrollbar-color: auto | dark | light | &lt;color>;<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<p><code>scrollbar-color<\/code> accepts the following values:<\/p>\n\n\n\n<ul><li><code>auto<\/code> is the default value and will render the standard scrollbar colors for the user agent.<\/li><li><code>dark<\/code> will tell the user agent to use darker scrollbars to match the current color scheme.<\/li><li><code>light<\/code> will tell the user agent to use lighter scrollbars to match the current color scheme.<\/li><li><code>&lt;color><\/code> specifies two colors to be used for the scrollbar. The first color is for the &#8220;thumb&#8221; or the moveable part of the scrollbar which appears on top. The second color is for the &#8220;track&#8221; or the fixed portion of the scrollbar.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image align-left media-285799\" id=\"post-285799\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/scrollbar-track-2.jpg?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"example\">Example<\/h3>\n\n\n<p>This combines the new spec syntax and the WebKit prefixed stuff.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWWXQzE\" src=\"\/\/codepen.io\/anon\/embed\/QWWXQzE?height=450&amp;theme-id=1&amp;slug-hash=QWWXQzE&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWWXQzE\" title=\"CodePen Embed QWWXQzE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\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-scrollbar\" 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\">121<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">64<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"IE - \"><span class=\"caniuse-agents-version version\">11<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">121<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">TP*<\/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=\"a yep-nope yep-nope-partial\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124*<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124*<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">13.4-13.7*<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"related\">Related<\/h3>\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar-gutter\/\"><code>scrollbar-gutter<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar-width\/\"><code>scrollbar-width<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar\/\"><code>scrollbar<\/code><\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"resources\">Resources<\/h3>\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/the-current-state-of-styling-scrollbars\/\">The Current State of Styling Scrollbars<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/custom-scrollbars-in-webkit\/\">Custom Scrollbars in WebKit<\/a><\/li><li><a href=\"https:\/\/drafts.csswg.org\/css-scrollbars-1\/#scrollbar-width\" rel=\"noopener\">CSSWG Scrollbars Module draft<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/wiki\/Css-scrollbars#Use-cases\" rel=\"noopener\">W3C collection of use-cases for scrollbar modification<\/a><\/li><li><a href=\"https:\/\/dev.to\/link2twenty\/future-of-css-scrollbars-2ihd\" rel=\"noopener\">Future of CSS: Scrollbars on dev.to<\/a><\/li><li><a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=891944&amp;q=scrollbar-color&amp;colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified\" rel=\"noopener\">Chromium Issue 891944<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The scrollbar-color property controls the two colors of a scrollbar: the thumb color and the track color. scrollbar-color is part of the CSS Working Group&#8217;s Scrollbars Module Level 1 draft, which is still a work in progress as of this writing.<\/p>\n","protected":false},"author":223334,"featured_media":0,"parent":13947,"menu_order":0,"comment_status":"closed","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":[],"acf":[],"jetpack-related-posts":[{"id":194420,"url":"https:\/\/css-tricks.com\/snippets\/sass\/custom-scrollbars-mixin\/","url_meta":{"origin":285700,"position":0},"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":14101,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar\/","url_meta":{"origin":285700,"position":1},"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":[]},{"id":283930,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar-width\/","url_meta":{"origin":285700,"position":2},"title":"scrollbar-width","date":"March 7, 2019","format":false,"excerpt":"Thescrollbar-width property in CSS controls the width or \u201cthickness\u201d of a scrollbar. scrollbar-width is part of the CSS Working Group\u2019s Scrollbars Module Level 1 draft, which is still a work in progress. The consensus at the time of writing this article is that scrollbar-width is likely to be included in\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-styling.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":278429,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar-gutter\/","url_meta":{"origin":285700,"position":3},"title":"scrollbar-gutter","date":"November 9, 2018","format":false,"excerpt":"The scrollbar-gutter property in CSS provides flexibility to determine how the space the browser uses to display a scrollbar that interacts with the content on the screen. The spec describes it as \"reserving space for the scrollbar\". The beauty of this is that now we can make sure: Content doesn't\u2026","rel":"","context":"In \"scrollbars\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/scrollbar-gutter.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":207678,"url":"https:\/\/css-tricks.com\/snippets\/css\/hide-scrollbar-in-edge-ie-1011\/","url_meta":{"origin":285700,"position":4},"title":"Hide Scrollbar in Edge, IE 10\/11","date":"September 5, 2015","format":false,"excerpt":"You can make it auto-hiding instead of always-showing: html { -ms-overflow-style: -ms-autohiding-scrollbar; } Turns out like this: Credit to Thierry Koblentz for digging this gem out of Jon Neal's Sanitize.css.","rel":"","context":"In \"scrollbars\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3311,"url":"https:\/\/css-tricks.com\/snippets\/css\/force-vertical-scrollbar\/","url_meta":{"origin":285700,"position":5},"title":"Force Vertical Scrollbar","date":"August 10, 2009","format":false,"excerpt":"html { overflow-y: scroll; } This is invalid CSS, but it works in everything except Opera. The reason for this is to prevent \"centering jumps\" when navigating back and forth between pages with enough content to have a vertical scroll bar and pages that do not.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/285700"}],"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\/223334"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=285700"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/285700\/revisions"}],"predecessor-version":[{"id":334122,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/285700\/revisions\/334122"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13947"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=285700"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=285700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}