top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

Facebook Login
Site Registration

In Css How to change the scrollbar color of the browser?

+1 vote

I tried the following code.But its not working.

html {scrollbar-face-color:#D6D7D6 ;
scrollbar-shadow-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;

scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color:  #000000;}
posted Jun 28, 2014 by Gowri Sankar

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

+1 vote

You can use the following attributes for webkit, which reach into the shadow DOM:

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

Here's a working fiddle with a red scrollbar, based on code from this page explaining the issues.

Using this and your solution, you can handle all browsers except Firefox, which at this point I think still requires a javascript solution.

answer Jul 1, 2014 by Vrije Mani Upadhyay
Thanks Man.It's working fine.Good Work..But need to find solution for firefox browser.I will try to find solution for firefox browser.
Similar Questions
+3 votes

Facing some weird issue, whenever I open my website in the crome it is picking the old CSS file while in Firefox it is picking the latest. How can I force the browser to pick the latest CSS?

+1 vote

I Tried the below code, the color is not reflected, Am i missing something?

#add description box beside test cases
    testCaseDescWindow = gtk.ScrolledWindow()
    testCaseDescWindow.set_policy(gtk.POLICY_AUTOMATIC, gtk.POLICY_AUTOMATIC)
Contact Us
+91 9880187415
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Karnataka INDIA.