How to make custom scrollbars show in all browsers?

Question

I am using a simple code for a color customized scrollbar:

<style type="text/css">  
<!--
BODY
{
    scrollbar-face-color: #000000;
    scrollbar-highlight-color: #000000;
    scrollbar-3dlight-color: #000000;
    scrollbar-darkshadow-color: #000000;
    scrollbar-shadow-color: #000000;
    scrollbar-arrow-color: #FF99FF;
    scrollbar-track-color: #FFCCFF;
}
-->
</style>

And it doesn't work in chrome, but it does in IE and not sure about other browsers. I am using chrome as my main browser, I have seen this issue on other websites as well but was wondering if there was any way around it?

There is a way to create semi-opacity divs/boxes that work in all browsers these days with special scripts, so was wondering if there was a solution like that for the scrollbars?

Thanks!

Answer 1

Here have some plugins that works for all browsers:

1. http://jscrollpane.kelvinluck.com/
2. http://www.hesido.com/web.php?page=customscrollbar
3. http://www.script-tutorials.com/custom-scrollbars-cross-browser-solution/

Answer 2

::-webkit-scrollbar {
    width: 15px;
    background:lightgray;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,1); 
    border-radius: 15px;
}

::-webkit-scrollbar-thumb {
    border-radius: 15px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background:cyan;
} 

This will work in Chrome. Firefox doesn't support scroll styling. Hope it helps!

Answer 3

/*! Firefox */    
html{
    scrollbar-color: #128612 #004E00;
}

/*! Other Browser */
html {
    --scrollbarBG: #128612;
    --thumbBG: #004E00;
  }
  body::-webkit-scrollbar {
    width: 11px;
  }
  body {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
  }
  body::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
  }
  body::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG) ;
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG);
  }

Answer 4

scrollbar is not a CSS standard. In Chrome or Safari (WebKit) you can use the extension prefixed by -webkit- Read more here.

FireFox doesn't support scrollbar styling.

So probably you can support this effect in IE and WebKit browsers only, or use JavaScript libraries as Iwo Kucharski said.

Answer 5

Those attributes will simply not work outside Internet Explorer. They are a somewhat bizarre Microsoft concoction that was never in any standard.

If you want to fake it, you'll need some Javascript. I don't think pure CSS will get you the effect.