How To Change The Scrollbar Color Of The Browser Window

I want to change the color of the scroll bar of browser window, I used the following code but its working only in IE8 and not in other like Chrome and Mozilla.. html {scrollbar-fac

Solution 1:

Have you considered using a jQuery plugin? Such as jScrollPane or Tiny Scrollbar.

As this question states:

Scrollbar CSS styles are an oddity invented by Microsoft developers. They are not part of the W3C standard for CSS and therefore most browsers just ignore them.

I'd recommend those jQuery plugins, as they are compatible with all browsers.

If you would rather not to use a plugin, it seems that as of 2013, 70% of browsers support some scrollbar styling. Such as this example code for webkit browsers: (ie Chrome)

#doc ::-webkit-scrollbar{width:9px;height:9px;}
#doc ::-webkit-scrollbar-button:start:decrement,#doc ::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent;}
#doc ::-webkit-scrollbar-track-piece{background-color:#FAFAFA;-webkit-border-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;}
#doc ::-webkit-scrollbar-thumb:vertical{height:50px;background-color:#999;-webkit-border-radius:8px;}
#doc ::-webkit-scrollbar-thumb:horizontal{width:50px;background-color:#999;-webkit-border-radius:8px;}

Each browser needs a different syntax, I would still suggest using a plugin.