How to change the scrollbar color using css

Question

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;
}

@Suresh Pattu: Are you comfirtable with javascript or jquery solutions? — Ahsan Khurshid, Sep 06 '12 at 05:13
I think you should view [this topic][1]. [1]: http://stackoverflow.com/questions/3890471/scrollbar-color-change-in-firefox — Naveen Web Solutions, Sep 06 '12 at 05:17
@Suresh Pattu: By Using jScrollpane a jQuery plugin, you can achieve a cross browser solution See This [Demo](http://jsfiddle.net/akhurshid/tRbCs/) — Ahsan Khurshid, Sep 06 '12 at 05:20
@Suresh Pattu: I am adding this as answer, So kindly accept it. Otherwise your question will remain open/active. — Ahsan Khurshid, Sep 06 '12 at 05:31

score 57 · Accepted Answer · answered Sep 06 '12 at 05:16

57

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.

answered Sep 06 '12 at 05:16

hayk.mart

1,973
18
21

not a good idea.. it should be cross browser solution. – Ahsan Khurshid Sep 06 '12 at 05: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 06 '12 at 05:20
By handling browsers separately you can't achieve same result. – Ahsan Khurshid Sep 06 '12 at 05:22
3

So it is better to use javascript/jquery plugins.. – Ahsan Khurshid Sep 06 '12 at 05:22
I agree that you can't currently stylize a Firefox scrollbar with CSS, so javascript should be used for full support – hayk.mart Sep 06 '12 at 05:24
20

@A.K: You can't achieve something the cross-browser way *if there is no cross-browser way to do it*. – BoltClock Sep 06 '12 at 08:03
This solution is only for webkit browsers. Question needs crossbrowser solution and that is achievable with javascript. – Branislav Mar 20 '13 at 19:11
8

FYI, this solution seems to be taken from here: http://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

Ahsan Khurshid · Answer 2 · 2012-09-07T04:12:05.000

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

edited Sep 07 '12 at 04:12

answered Sep 06 '12 at 05:34

Ahsan Khurshid

8,957
1
30
51

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

How to change the scrollbar color using css

2 Answers2

Linked

Related