How to change the color of scrollbars

Question

I want to change the color of the scrollbars on my pages in Internet Explorer and Firefox.

This code creates scrollbars:

        
                      

              相关标签:
       
      

Answer 1

This code was easyer just paste after

< h e a d >

<style type="text/css">
::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 1ex; }
</style>

Answer 2

enter code here


html,body{
     scrollbar-face-color: #414340;
            scrollbar-shadow-color: #cccccc;
            scrollbar-highlight-color: #cccccc;
            scrollbar-3dlight-color: #cccccc;
            scrollbar-darkshadow-color: #cccccc;
            scrollbar-track-color: #cccccc;
            scrollbar-arrow-color: #000000;
}

Answer 3

We can change color of scrollbar using javascript also. There are various components in scroll bar like base color, face color, arrow color etc that changes color of various parts of scroll bar. The following lines might help you.

document.body.style.scrollbarBaseColor = "colorname";
document.body.style.scrollbarArrowColor = "colorname";
document.body.style.scrollbarTrackColor = "colorname";

Apart from the above styles, you will have scrollbarShadowColor, scrollbarHighlightColor, scrollbar3dlightColor,scrollbarDarkshadowColor etc. So, choose your component of scroll bar and change the color of it.

Answer 4

For Chrome and Safari you can change the scrollbar style using this code:

/* Chrome, Safari */
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track-piece  {
background-color: #C2D2E4;
}
::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}

Answer 5

It works in IE5 to 7. It has been discontinued in IE8. Safari recently gave support for it using different css properties I believe.

There are usability concerns with changing the scrollbar colour.

Answer 6

Just as others said, the CSS you posted won't work on modern browsers (IE8, Safari, Firefox, etc). Since you're trying to scroll a div, you do, however, have the option of making a custom scrollbar in Javascript/DHTML. A quick Google search reveals a few have done just that like this one: http://www.hesido.com/web.php?page=customscrollbar