Custom CSS Scrollbar for Firefox

Question

I want to customize a scrollbar with CSS   I use this WebKit CSS code  which works well for Safari and Chrome     -webkit-scrollbar       width  15px      height  15px       -webkit-scrollbar-track-piece        background-color   C2D2E4       -webkit-scrollbar-thumb vertical       height  30px      background-color   0A4C95      How can I do the same thing in Firefox   I know I can easily do it using jQuery  but I would prefer to do it with pure CSS if it s doable   Would be grateful for somebody s expert advice

User · Answer

Here I have tried this CSS for all major browser & tested: Custom color are working fine on scrollbar.

Yes, there are limitations on several versions of different browsers.

_x000D_

/* Only Chrome */
html::-webkit-scrollbar {width: 17px;}
html::-webkit-scrollbar-thumb {background-color: #0064a7; background-clip: padding-box; border: 1px solid #8ea5b5;}
html::-webkit-scrollbar-track {background-color: #8ea5b5; }
::-webkit-scrollbar-button {background-color: #8ea5b5;}
/* Only IE */
html {scrollbar-face-color: #0064a7; scrollbar-shadow-color: #8ea5b5; scrollbar-highlight-color: #8ea5b5;}
/* Only FireFox */
html {scrollbar-color: #0064a7 #8ea5b5;}
/* View Scrollbar */
html {overflow-y: scroll;overflow-x: hidden;}

_x000D_

<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <header>
        <div id="logo"><img src="/logo.png">HTML5&nbsp;Layout</div>
        <nav>  
            <ul>
                <li><a href="/">Home</a>
                <li><a href="https://html-css-js.com/">HTML</a>
                <li><a href="https://html-css-js.com/css/code/">CSS</a>
                <li><a href="https://htmlcheatsheet.com/js/">JS</a>
            </ul>
        </nav>
    </header>
    <section>
        <strong>Demonstration of a simple page layout using HTML5 tags: header, nav, section, main, article, aside, footer, address.</strong>
    </section>
    <section id="pageContent">
        <main role="main">
            <article>
                <h2>Stet facilis ius te</h2>
                <p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.</p>
            </article>
            <article>
                <h2>Illud mollis moderatius</h2>
                <p>Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam fastidii.</p>
            </article>
            <article>
                <h2>Ex ignota epicurei quo</h2>
                <p>Quo debet vivendo ex. Qui ut admodum senserit partiendo. Id adipiscing disputando eam, sea id magna pertinax concludaturque. Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu soleat voluptatibus, cum cu exerci mediocritatem. Malis legere at per, has brute putant animal et, in consul utamur usu.</p>
            </article>
            <article>
                <h2>His at autem inani volutpat</h2>
                <p>Te has amet modo perfecto, te eum mucius conclusionemque, mel te erat deterruisset. Duo ceteros phaedrum id, ornatus postulant in sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix, vel nisl albucius gloriatur no.</p>
            </article>
        </main>
        <aside>
            <div>Sidebar 1</div>
            <div>Sidebar 2</div>
            <div>Sidebar 3</div>
        </aside>
    </section>
    <footer>
        <p>&copy; You can copy, edit and publish this template but please leave a link to our website | <a href="https://html5-templates.com/" target="_blank" rel="nofollow">HTML5 Templates</a></p>
        <address>
            Contact: <a href="mailto:[email protected]">Mail me</a>
        </address>
    </footer>


</body>

</html>

_x000D_

User · Answer

Firefox 64 adds support for the spec draft CSS Scrollbars Module Level 1  which adds two new properties of scrollbar-width and scrollbar-color which give some control over how scrollbars are displayed   You can set scrollbar-color to one of the following values  descriptions from MDN     auto Default platform rendering for the track portion of the scrollbar  in the absence of any other related scrollbar color properties  dark Show a dark scrollbar  which can be either a dark variant of scrollbar provided by the platform  or a custom scrollbar with dark colors  light Show a light scrollbar  which can be either a light variant of scrollbar provided by the platform  or a custom scrollbar with light colors   lt color gt   lt color gt  Applies the first color to the scrollbar thumb  the second to the scrollbar track    Note that dark and light values are not currently implemented in Firefox   macOS notes   The auto-hiding semi-transparent scrollbars that are the macOS default cannot be colored with this rule  they still choose their own contrasting color based on the background   Only the permanently showing scrollbars  System Preferences   Show Scroll Bars   Always  are colored   Visual Demo    x000D   x000D   scroll   x000D    width  20   x000D    height  100px  x000D    border  1px solid grey  x000D    overflow  scroll  x000D    display  inline-block  x000D    x000D   scroll-color-auto   x000D    scrollbar-color  auto  x000D    x000D   scroll-color-dark   x000D    scrollbar-color  dark  x000D    x000D   scroll-color-light   x000D    scrollbar-color  light  x000D    x000D   scroll-color-colors   x000D    scrollbar-color  orange lightyellow  x000D    x000D   lt div class  scroll scroll-color-auto  gt  x000D   lt p gt auto lt  p gt  lt p gt auto lt  p gt  lt p gt auto lt  p gt  lt p gt auto lt  p gt  lt p gt auto lt  p gt  lt p gt auto lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  scroll scroll-color-dark  gt  x000D   lt p gt dark lt  p gt  lt p gt dark lt  p gt  lt p gt dark lt  p gt  lt p gt dark lt  p gt  lt p gt dark lt  p gt  lt p gt dark lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  scroll scroll-color-light  gt  x000D   lt p gt light lt  p gt  lt p gt light lt  p gt  lt p gt light lt  p gt  lt p gt light lt  p gt  lt p gt light lt  p gt  lt p gt light lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  scroll scroll-color-colors  gt  x000D   lt p gt colors lt  p gt  lt p gt colors lt  p gt  lt p gt colors lt  p gt  lt p gt colors lt  p gt  lt p gt colors lt  p gt  lt p gt colors lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    You can set scrollbar-width to one of the following values  descriptions from MDN     auto The default scrollbar width for the platform  thin A thin scrollbar width variant on platforms that provide that option  or a thinner scrollbar than the default platform scrollbar width  none No scrollbar shown  however the element will still be scrollable    You can also set a specific length value  according to the spec  Both thin and a specific length may not do anything on all platforms  and what exactly it does is platform-specific  In particular  Firefox doesn t appear to be currently support a specific length value  this comment on their bug tracker seems to confirm this   The thin keywork does appear to be well-supported however  with macOS and Windows support at-least   It s probably worth noting that the length value option and the entire scrollbar-width property are being considered for removal in a future draft  and if that happens this particular property may be removed from Firefox in a future version   Visual Demo    x000D   x000D   scroll   x000D    width  30   x000D    height  100px  x000D    border  1px solid grey  x000D    overflow  scroll  x000D    display  inline-block  x000D    x000D   scroll-width-auto   x000D    scrollbar-width  auto  x000D    x000D   scroll-width-thin   x000D    scrollbar-width  thin  x000D    x000D   scroll-width-none   x000D    scrollbar-width  none  x000D    x000D   lt div class  scroll scroll-width-auto  gt  x000D   lt p gt auto lt  p gt  lt p gt auto lt  p gt  lt p gt auto lt  p gt  lt p gt auto lt  p gt  lt p gt auto lt  p gt  lt p gt auto lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  scroll scroll-width-thin  gt  x000D   lt p gt thin lt  p gt  lt p gt thin lt  p gt  lt p gt thin lt  p gt  lt p gt thin lt  p gt  lt p gt thin lt  p gt  lt p gt thin lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  scroll scroll-width-none  gt  x000D   lt p gt none lt  p gt  lt p gt none lt  p gt  lt p gt none lt  p gt  lt p gt none lt  p gt  lt p gt none lt  p gt  lt p gt none lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Year 2020 this works     Thin Scrollbar     root    scrollbar-color  rgb 210 210 210  rgb 46 54 69   important    scrollbar-width  thin  important      https   github com Aris-t2 CustomCSSforFx issues 160

User · Answer

I thought I would share my findings in case someone is considering a JQuery plugin to do the job   I gave JQuery Custom Scrollbar a go  It s pretty fancy and does some smooth scrolling  with scrolling inertia  and has loads of parameters you can tweak  but it ended up being a bit too CPU intensive for me  and it adds a fair amount to the DOM    Now I m giving Perfect Scrollbar a go  It s simple and lightweight  6KB  and it s doing a decent job so far  It s not CPU intensive at all  as far as I can tell  and adds very little to your DOM  It s only got a couple of parameters to tweak  wheelSpeed and wheelPropagation   but it s all I need and it handles updates to the scrolling content nicely  such as loading images    P S  I did have a quick look at JScrollPane  but  simone is right  it s a bit dated now and a PITA

User · Answer

May I offer an alternative   No scripting whatsoever  only standardized css styles and a little bit of creativity  Short answer - masking parts of the existing browser scrollbar  which means you retain all of it s functionality    scroll content       position  relative      width  400px      height  414px      top  -17px      padding  20px 10px 20px 10px      overflow-y  auto      For demo and a little bit more in-depth explanation  check here     jsfiddle net aj7bxtjz 1

User · Answer

As of late 2018  there is now limited customization available in Firefox  See these answers   https   stackoverflow com a 54101063 405015 https   stackoverflow com a 53739309 405015  And this for background info  https   bugzilla mozilla org show bug cgi id 1460109  There s no Firefox equivalent to   -webkit-scrollbar and friends  You ll have to stick with JavaScript  Plenty of people would like this feature  see  https   bugzilla mozilla org show bug cgi id 77790  As far as JavaScript replacements go  you can try   https   github com mdbootstrap perfect-scrollbar https   github com Grsmto simplebar https   github com vitch jScrollPane

User · Answer

As of now there is just two property for firefox scrollbar customization is available   scrollbar-color  amp  scrollbar width scrollbar-color red yellow   track thumb  scrollbar-width 5px  HTML  lt div class  quot demo quot  gt   css  demo   overflow-y scroll      demo   scrollbar-color red yellow  scrollbar-width 5px

User · Answer

It works in user-style  and it seems not to work in web pages  I have not found official direction from Mozilla on this  While it may have worked at some point  Firefox does not have official support for this  This bug is still open https   bugzilla mozilla org show bug cgi id 77790  scrollbar       clear useragent default style      -moz-appearance  none  important       buttons at two ends    scrollbarbutton      -moz-appearance  none  important       the sliding part   thumb     -moz-appearance  none  important    scrollcorner      -moz-appearance  none  important     resize both       vertical or horizontal    scrollbar orient  vertical         color silver      check http   codemug com html custom-scrollbars-using-css   for details

User · Answer

Since Firefox 64  is possible to use new specs for a simple Scrollbar styling  not as complete as in Chrome with vendor prefixes    In this example is possible to see a solution that combine different rules to address both Firefox and Chrome with a similar  not equal  final result  example use your original Chrome rules    The key rules are   For Firefox   scroller     overflow-y  scroll    scrollbar-color   0A4C95  C2D2E4      For Chrome   scroller  -webkit-scrollbar       width  15px      height  15px      scroller  -webkit-scrollbar-track-piece        background-color   C2D2E4      scroller  -webkit-scrollbar-thumb vertical       height  30px      background-color   0A4C95      Please note that respect to your solution  is possible to use also simpler Chrome rules as the following    scroller  -webkit-scrollbar-track        background-color   C2D2E4      scroller  -webkit-scrollbar-thumb       height  30px      background-color   0A4C95      Finally  in order to hide arrows in scrollbars also in Firefox  currently is necessary to set it as  thin  with the following rule scrollbar-width  thin

[css] Custom CSS Scrollbar for Firefox

Examples related to css

Examples related to firefox

Examples related to webkit

Examples related to scrollbar