I've tried googling this but I have not yet found a simple resolution.

 

I want to change the colour of the scrollbars. This because I need certain divs to scroll and they look terrible in the standard grey, otherwise I wouldn't bother.

 

I dont need anything fancy, just to change the colours. Please could someone help me with something that is simple and supported across the top browsers please.

 

Thanks in advance

I've tried googling this but I have not yet found a simple resolution.

 

I want to change the colour of the scrollbars. This because I need certain divs to scroll and they look terrible in the standard grey, otherwise I wouldn't bother.

 

I dont need anything fancy, just to change the colours. Please could someone help me with something that is simple and supported across the top browsers please.

 

Thanks in advance

 

Try using this:

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

 

I've used this for my personal website before, worked like a charm.

 

If you're looking for something simpler, try this:

 

body {
    scrollbar-arrow-color: #000000;
    scrollbar-base-color: #00CCFF;
    scrollbar-face-color: #0099FF;
    scrollbar-highlight-color: #00CCFF;
    scrollbar-shadow-color: #00CCFF;
    scrollbar-3dlight-color: #00CCFF;
    scrollbar-track-color: #00CCFF;
    scrollbar-darkshadow-color: #00CCFF;
} 

 

Haven't tried the second option, so you'll have to excuse me if this doesn't do what you want.

Edited February 21, 201214 yr by Dissident

f you're looking for something simpler, try this:

 

body {
    scrollbar-arrow-color: #000000;
    scrollbar-base-color: #00CCFF;
    scrollbar-face-color: #0099FF;
    scrollbar-highlight-color: #00CCFF;
    scrollbar-shadow-color: #00CCFF;
    scrollbar-3dlight-color: #00CCFF;
    scrollbar-track-color: #00CCFF;
    scrollbar-darkshadow-color: #00CCFF;
} 

Haven't tried the second option, so you'll have to excuse me if this doesn't do what you want.

The CSS method only works in IE (I use it for the html style, not the body style). Use javascript if you want other browsers to show a different scrollbar.

The CSS method only works in IE (I use it for the html style, not the body style). Use javascript if you want other browsers to show a different scrollbar.

 

Thanks for the information, as I said, have never used it before.

 

I'd suggest using the jQuery plugin then.

Thanks for your comments so far.

 

Im aware of the general scrollbar css but as many know this doesnt work in all browsers.

 

Ive been reading up on webkit and apparently there is a newish function allowing you to change scrollbar colours. Only thing is I cant seem to know how to do it.

 

Ive tried entering the css which is something like

 

pre::-webkit-scrollbar {

height: 1ex;

}

 

pre::-webkit-scrollbar-thumb:horizontal{

background: rgba(0, 0, 0, .2);

}

 

This doesnt seem to work for me. I am currently using Dreamweaver and when I enter -webkit it brings up a load of options but not the scrollbar one.

 

Does anyone know anything about this??

Take a look at this:

http://css-tricks.com/custom-scrollbars-in-webkit/

Thank u