Scroll Bar Color

 

For those of you interested in how to change the color of the users scrollbar, here's how.

 

body
{
scrollbar-base-color: rgb(0,0,0);
 }

This is the easiest way of doing it.  Add "scrollbar-base-color: rgb(0, 0, 0);" to the body section of your CSS file.  Replace 0,0,0 with the RGB code of the color you want the scroll bar to be.  The color used on this page is 90,125,75.  

 

If you want to get a little more fancy, then you can add this too.

 

scrollbar-3dlight-color: rgb(0, 0, 0); 

scrollbar-arrow-color: rgb(0, 0, 0); 

scrollbar-darkshadow-color: rgb(0, 0, 0); 

scrollbar-face-color: rgb(0, 0, 0); 

scrollbar-highlight-color: rgb(0, 0, 0); 

scrollbar-shadow-color: rgb(0, 0, 0);

 

A page on Microsoft's Website has a tool used for building the code for scrollbars.

http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarColor.htm

 

 

The output looks like this:

 

<HTML>
<HEAD>
<STYLE>
.TA {scrollbar-3dlight-color:blue;
scrollbar-arrow-color:;
scrollbar-base-color:blue;
scrollbar-darkshadow-color:aqua;
scrollbar-face-color:chartreuse;
scrollbar-highlight-color:;
scrollbar-shadow-color:blue}
</STYLE>
</HEAD>
<BODY>
<TEXTAREA cols=30 rows=5 wrap=off CLASS="TA">This is text inside a TEXTAREA element.
You can change the color of the scrollbars for this element with the controls below.
This is text inside a TEXTAREA element.
You can change the color of the scrollbars for this element with the controls below.
This is text inside a TEXTAREA element.
You can change the color of the scrollbars for this element with the controls below.
This is text inside a TEXTAREA element.
You can change the color of the scrollbars for this element with the controls below.
This is text inside a TEXTAREA element.
You can change the color of the scrollbars for this element with the controls below.</TEXTAREA>
</BODY>
</HTML>

 

The easiest thing to do is to delete everything except for the code you want.  So you are left with this to paste into your CSS file:

scrollbar-3dlight-color:blue;
scrollbar-arrow-color:magenta;
scrollbar-base-color:blue;
scrollbar-darkshadow-color:aqua;
scrollbar-face-color:chartreuse;
scrollbar-highlight-color:orange;
scrollbar-shadow-color:blue;

 

Also a side note, you may have noticed that the output from Microsoft's tool has color names instead of rgb(0,0,0).  This is another way of writing CSS stylesheets.  The third way is using the hexadecimal code.

For Example:

scrollbar-face-color: #00FF00

If you don't understand this, then don't use it.