39

My jsfiddle is here
I trying to change the color of the scrollbar but here it is not working.

Css:

.flexcroll {     
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}​
5
  • 1
    this will only work in IE browsers.. – Ahsan Khurshid Sep 6 '12 at 5:12
  • @Suresh Pattu: Are you comfirtable with javascript or jquery solutions? – Ahsan Khurshid Sep 6 '12 at 5:13
  • 1
    I think you should view [this topic][1]. [1]: stackoverflow.com/questions/3890471/… – Naveen Web Solutions Sep 6 '12 at 5:17
  • 2
    @Suresh Pattu: By Using jScrollpane a jQuery plugin, you can achieve a cross browser solution See This Demo – Ahsan Khurshid Sep 6 '12 at 5:20
  • @Suresh Pattu: I am adding this as answer, So kindly accept it. Otherwise your question will remain open/active. – Ahsan Khurshid Sep 6 '12 at 5:31
59
+50

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.

http://jsfiddle.net/hmartiro/Xck2A/1/

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

8
  • not a good idea.. it should be cross browser solution. – Ahsan Khurshid Sep 6 '12 at 5:18
  • 1
    There is none - you will have to handle browsers separately, or use a javascript library that handles it for you. – hayk.mart Sep 6 '12 at 5:20
  • 3
    So it is better to use javascript/jquery plugins.. – Ahsan Khurshid Sep 6 '12 at 5:22
  • 20
    @A.K: You can't achieve something the cross-browser way if there is no cross-browser way to do it. – BoltClock Sep 6 '12 at 8:03
  • 8
    FYI, this solution seems to be taken from here: css-tricks.com/custom-scrollbars-in-webkit which is fine, but the site explains each style (1-7) and what it applies to. – JackArbiter Oct 23 '14 at 16:38
16

Your css will only work in IE browser. And the css suggessted by hayk.mart will olny work in webkit browsers. And by using different css hacks you can't style your browsers scroll bars with a same result.

So, it is better to use a jQuery/Javascript plugin to achieve a cross browser solution with a same result.

Solution:

By Using jScrollPane a jQuery plugin, you can achieve a cross browser solution

See This Demo

1
  • The demo doesn't work at least on Chrome. – aderchox Feb 18 '20 at 5:11

Not the answer you're looking for? Browse other questions tagged or ask your own question.