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

Just copy and paste after head for

1.rounded corners style

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

2.square corners with border style

<style type="text/css">
::-webkit-scrollbar {width: 9px; height: 3px; background: #FFFFFF;}
::-webkit-scrollbar-thumb {background-color:#ffffff ; border: 1px solid black;}
</style>

you can change the color for code click here or here

Answer 2

That code only works in Internet Explorer. Are you testing in Firefox or Safari by chance?

Answer 3

Create a class for the div, code the scrollbar colors in that class, then apply it to the div. You are not changing the scrollbar colors on the browser, only the div you are creating. Your div would be <div style="overflow: auto; width: 750px; height: 400px" class="className"> </div>

In your class you would create the scrollbar colors using the applicable scrollbar part names, i.e. scrollbar-face-color and so on. To find out which code applies to which area of the scroll check http://iebar.discoveryvip.com/, or you can search on the web, there are a number of places for that.

Answer 4

Try this

*, html {
scrollbar-face-color: #FF0000;
scrollbar-shadow-color: #0000FF;
scrollbar-highlight-color: #00FF00;
scrollbar-3dlight-color: #FF00FF;
scrollbar-darkshadow-color: #00FFFF;
scrollbar-track-color: #FFFF00;
scrollbar-arrow-color: #000000;}