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

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

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

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

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

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

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

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

Here I have tried this CSS for all major browser  amp  tested  Custom color are working fine on scrollbar  Yes  there are limitations on several versions of different browsers   x000D   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   lt  doctype html gt   lt html lang  en  class  no-js  gt   lt head gt       lt meta charset  utf-8  gt       lt meta http-equiv  x-ua-compatible  content  ie edge  gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt   lt  head gt   lt body gt       lt header gt           lt div id  logo  gt  lt img src   logo png  gt HTML5 amp nbsp Layout lt  div gt           lt nav gt                 lt ul gt                   lt li gt  lt a href     gt Home lt  a gt                   lt li gt  lt a href  https   html-css-js com   gt HTML lt  a gt                   lt li gt  lt a href  https   html-css-js com css code   gt CSS lt  a gt                   lt li gt  lt a href  https   htmlcheatsheet com js   gt JS lt  a gt               lt  ul gt           lt  nav gt       lt  header gt       lt section gt           lt strong gt Demonstration of a simple page layout using HTML5 tags  header  nav  section  main  article  aside  footer  address  lt  strong gt       lt  section gt       lt section id  pageContent  gt           lt main role  main  gt               lt article gt                   lt h2 gt Stet facilis ius te lt  h2 gt                   lt p gt 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  lt  p gt               lt  article gt               lt article gt                   lt h2 gt Illud mollis moderatius lt  h2 gt                   lt p gt 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  lt  p gt               lt  article gt               lt article gt                   lt h2 gt Ex ignota epicurei quo lt  h2 gt                   lt p gt 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  lt  p gt               lt  article gt               lt article gt                   lt h2 gt His at autem inani volutpat lt  h2 gt                   lt p gt 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  lt  p gt               lt  article gt           lt  main gt           lt aside gt               lt div gt Sidebar 1 lt  div gt               lt div gt Sidebar 2 lt  div gt               lt div gt Sidebar 3 lt  div gt           lt  aside gt       lt  section gt       lt footer gt           lt p gt  amp copy  You can copy  edit and publish this template but please leave a link to our website    lt a href  https   html5-templates com   target   blank  rel  nofollow  gt HTML5 Templates lt  a gt  lt  p gt           lt address gt              Contact   lt a href  mailto me example com  gt Mail me lt  a gt           lt  address gt       lt  footer gt     lt  body gt    lt  html gt  x000D   x000D   x000D

[css] Custom CSS Scrollbar for Firefox

Examples related to css

Examples related to firefox

Examples related to webkit

Examples related to scrollbar