|
Color the Scrollbar
By Stephen Bucaro
Maybe you've picked a beautiful color scheme for your web site, but you're still
stuck with the browsers default scrollbar colors. With some simple CSS code,
you can color the scrollbar to match your web site's color scheme. In this article,
I show you how to color the browsers scrollbars, and any other scrollbars on your webpage.
The easiest way to color the scrollbar is to apply the scrollbar-base-color
property. The code shown below uses an inline style attribute applied to the
<body> tag to color the browsers scrollbars.
<body style="scrollbar-base-color:blue;">
In the remaining examples, rather than actually applying color to the scrollbars
of the webpage that you're looking at, I'll show you how to apply color to the
scrollbars of a <div> element used as a text area.
I'll use some style properties to style the div, which are not related to coloring
the scrollbars. In order to simplify things, I won't be repeating those properties
in the example code. I list them below just for your information.
width: 400px;
height: 100px;
padding: 10px;
margin: 10px;
overflow: auto;
border-style: solid;
border-width: 1px;
font-family:verdana;
font-size: 10pt;
Another way to color the scrollbar is to specify a color for each part of the
scrollabr separately. The parts of a scrollbar are shown below.
| 
Free Downloads