Basic Scrollbar Styling

Scrollbar styling was introduced with Microsoft's Internet Explorer 5.5 browser and has become very popular. It allows you to color the browser's scrollbar's components to match your page's overall color scheme. The scrollbar on this page is an example. If you're using IE 5.5+, you'll see a green and yellow scrollbar.

Scrollbars are styled with the "body" element, as if there wasn't already enough stuff in there. This is where you put your background properties among other things. The easiest way to style a scrollbar is with the overall "scrollbar-base-color:" property:

body {scrollbar-base-color: red}

The single line of code above would produce the scrollbar pictured below.

Note how IE lightens and darkens the basic "red" color to automatically create a 3-D effect. This works with any color you choose. You might, however want a "flat" scrollbar like I've used on this page or a more dramatic 3-D look. To get these effects, you'll have to color individual scrollbar components.

Scrollbar Components

To color scrollbar components you just use CSS properties and color values for each component. The properties are coded like this:

scrollbar-[component you want to color]-color: [color you want to use].

For example, to get the "track" that the scrollbar slides in green, like the one on this page:

body{scrollbar-track-color: #009966}

Don't forget the hyphens ( - ) and don't add any spaces in the property name. Don't forget the colon, either. It's easy to make typos with such long property names. Expect to spend a little time debugging your scrollbar styling until you're used to it.

There are a lot of components you can color. The image below shows the components you can color. The color scheme is for demonstration purposes. You'd probably use various shades of a base color to get a deep 3-D effect. Also note that some of the diagram's property names begin with upper-case letters. The actual property names are coded in all lower-case letters.

The names used above are the same names as the component name you'll need in the "scrollbar-[component name]-color:" property. The only difference is that no upper-case letters are used in the actual code.

Here's the scrollbar styling used on this site. It makes a flat-looking scrollbar.

scrollbar-base-color: #009966;
scrollbar-track-color: #009966;
scrollbar-face-color: #ffff99;
scrollbar-highlight-color: #009966;
scrollbar-3dlight-color: #009966;
scrollbar-darkshadow-color: #009966;
scrollbar-shadow-color: #009966;
scrollbar-arrow-color: #009966;

Most of the components contribute to a 3-D or "flat" look. The major items to consider are the "face", "track", and "arrow". Just to the top and left of the "face" is "highlight". Outside "highlight" is "3dlight". To the right and bottom are "shadow" next to the face and "darkshadow" around "shadow.

These 3-D components effect the scrollbar's button as well as the boxes the arrows are in.

3-D Look

To style a heavy 3-D look you'd set up a basic color scheme for "face", "track", and "arrow". Next use white or a very light shade of the "face" color for "3dlight". Then code black or a very dark shade of the "face" color for "darkshadow".

Finish the styling by picking a "just lighter than face" shade for "highlight" and "just darker than face" shade for "shadow". You'll have to try a few colors before finding one that looks perfect.

Flat Look

To make a "flat" looking scrollbar, like the scrollbars on this site, the 3-D components are coded to the same color as the "track" color. The components that make the 3-D look are "3dlight", "highlight", "shadow", and "darkshadow". I set all of these to the site's green "track" color to make the button appear flat.

Practice styling your scrollbars by beginning with contrasting colors and styling one component (property) at a time. Check your work after coloring each component to see what you've done. This is the best way to remember which properties color which items.

Tips

You may want to copy the labeled image of the styled scrollbar above. It makes a handy reference. Oh, and don't forget, just using "scrollbar-base-color" alone may be all the styling you need. Begin scrollbar styling with this property and "scrollbar-track-color" to get your scrollbar styling scheme started.

Copy the code outline below to a text file:

scrollbar-base-color:
scrollbar-track-color:
scrollbar-face-color:
scrollbar-highlight-color:
scrollbar-3dlight-color:
scrollbar-darkshadow-color:
scrollbar-shadow-color:
scrollbar-arrow-color:

Now when you need to style a scrollbar, you can just paste this outline code in your CSS to remind you what options you have available. All you have to do is add in the color values.

Congratulations are in order. You've completed the Beginning CSS Course. Read the course review and do the recommended exercises and then tackle the final exam. When you can ace the final exam, move on to Advanced HTML.