WebsiteTips.com - Web Design Tutorials, Tips, Top Resources

Coloring Your Scrollbars with CSS

by Shirley E. Kaiser, M.A., SKDesigns

Published March, 2001. Updated March, 2006. Copyright © 2001-2014, Shirley E. Kaiser, M.A., SKDesigns. All rights reserved. Published at websitetips.com with permission.

It's true! You really can color your scrollbars and have a change of scenery from the basic gray or other browser default scrollbar colors. It just takes a few snippets of CSS markup to create colored scrollbars with CSS, which you'll learn how to do in this tutorial.

Note: To see the results, you'll need to view your page with Internet Explorer 5.5+, too. (Most other browsers use the browser default and do NOT support scrollbar colors - see the Further Information section below.)

You can also color the scrollbar of a form's textarea field, as shown below. I used a variety of bright colors to show some of the scrollbar property attribute colors that are possible to change.


If you don't see a colorful scrollbar above, here are some screen shots. (A separate popup window will open.)

This tutorial is geared for those with a knowledge of basic HTML markup, including forms, and a beginning to intermediate level knowledge of CSS.

Books on CSS
Recommended by WebsiteTips.com

  • CSS Pocket Reference: Visual Presentation for the Web, 3rd Edition, by Eric Meyer. Published by O'Reilly, October, 2007.
  • Book cover: The CSS Anthology: 101 Essential Tips, Tricks & Hacks, Practical Solutions to Common Problems, by Rachel Andrew
  • The Zen of CSS Design, by Dave Shea, Molly E. Holzschlag. Peachpit 12-2004.
  • Cover - The Ultimate CSS Reference, by Tommy Olsson, Paul O'Brien. Sitepoint (02-2008).

See more CSS books, read reviews, why we recommend each book

In association with In association with Amazon.com

Here are the Style Rules

Now we're ready to learn how to add the scrollbar property rules for the browser scrollbar or the textarea form field scrollbar.

As shown below:

As you know if you've used CSS:

Tip:

 iStockPhoto - Bringing photographers and designers together - Stunning images starting at only 1 dollar  Wondering what colors to use? Need to know corresponding HTML color codes? Visit WebsiteTips.com's Web Site Resources Color Color Tools Section for:

In addition, our Color Resources section also has annotated links to great tutorials all about color, books on color, color management, and hardware and software to calibrate and manage colors.

Editor note February 2006: Note that not everyone considers colored scrollbars a good thing, and you should also be sure the colors you choose aren't a problem for those with color deficiencies or vision impairments. Before altering scrollbar colors, make sure they won't be a problem to use by anyone and that they will be well received by your visitors! See the following:

top‘On this page’ menu

Browser Scrollbar

Browser Scrollbar: Fast, One Color Route

If you wish to go the fast and simple route, you can add just the scrollbar-base-color attribute to your CSS style rules rather than all of them as shown below. The scrollbar-base-color attribute is a composite attribute (which means it can encompass the other scrollbar property attributes.)

For example, if you wish to have a shade of blue for your scrollbar, you could just add this to your body element rules, as highlighted below:

<html>
<head>

<style type="text/css">

body {scrollbar-base-color:#369;}

</style>

</head>

All the scrollbar colors will use a shade of blue, as shown in the screen shot below:

Example 2 (screen shot)
forms scrollbar example (blue)

You can also view a sample page. (A separate popup window will open with a sample.)

Browser Scrollbar: Still Fast, but More Colors Route

For more detail to the browser's scrollbar colors, add the scrollbar property style rules to the body element, as highlighted below: (These are the style rules for Example 1 above.)

<html>
<head>

<style type="text/css">

body {scrollbar-3dlight-color:#ffd700;
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f}

</style>

</head>

As you can see in the above markup, there are several scrollbar property attributes for which you can designate a color. Change any of the color properties to blend with your particular Web page needs.

magnification of scroll bar colors styled with CSS

The screen shot to the left is a magnification of the colored scrollbar for easier viewing of each of the scrollbar property attributes.

If you do not include a scrollbar property attribute, it will revert to that attribute's default color.

IMPORTANT NOTE:
NONE of the images, content, or other materials at websitetips.com, including this one, are available for you to steal and place on your own Web sites.
You are, however, welcome to create a link to this tutorial for others to visit.

For example: Coloring Your Scrollbars with CSS by Shirley Kaiser for WebsiteTips.com -

use the following HTML markup:

<a href="http://websitetips.com/articles/css/scrollbars/">Coloring Your Scrollbars with CSS</a> by Shirley Kaiser for <a href="http://websitetips.com/">WebsiteTips.com</a>.

See this Web site's Copyright Information page for more information.

Now, let's get on with the rest of the tutorial...

top‘On this page’ menu

Scrollbar Track Color

In the above examples, the scrollbar track gives a checkered appearance. If you'd like to have a solid color instead, as shown in the samples in example 3a through 3d below, Terence Curtis of tfcDESIGN let me know of the scrollbar-track-color attribute.



The scrollbar-track-color attribute is the last attribute in the list below, highlighted:

<html>
<head>

<style type="text/css">

.scrollbar2 {
scrollbar-3dlight-color:#ffd700;
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f;
scrollbar-track-color:#800080;
}
</head>

And a couple more samples:



At the time this tutorial was written, the scrollbar-track-color attribute is not documented on Microsoft's CSS attributes page with the other scrollbar attributes, but I did find it among the textarea documentation and a page on the scrollbar trackcolor attribute.

top‘On this page’ menu

New and Popular Books on CSS
Recommended by WebsiteTips.com

  •  CSS: The Missing Manual. by David Sawyer McFarland. O'Reilly (08-2006). 
  •  Cover - CSS Mastery. by Andy Budd, Simon Collison, Cameron Moll. 02-2006. 
  • CSS: The Definitive Guide, 3rd Ed. by Eric Meyer. O'Reilly (11-2006). 
  • Build Your Own Web Site the Right Way Using HTML & CSS, by Ian Lloyd. SitePoint (May 2, 2006) 

Read reviews, why we recommend each book.

In association with In association with Amazon.com

Forms Scrollbar

Forms Scrollbar: Fast, One Color Route

If you wish to go the fast and simple route, your can add just the scrollbar-base-color attribute to your CSS style rules rather than adding all of them, as shown below.

Add a textarea element rule to your CSS using the scrollbar-base-color attribute, the same scrollbar property attribute that you used above for the browser scrollbars.

For example, if you wish to have a shade of blue for your scrollbar, you could just add this rule to your textarea element, as highlighted below:

<html>
<head>

<style type="text/css">

textarea {scrollbar-base-color: #369;}

</style>

</head>

top‘On this page’ menu

Forms Scrollbar: Still Fast, but More Colors Route

More colors are handled the same way as the one color route above, this time noting the scrollbar attributes within your style rules for the textarea element. The only difference with adding more colors is that you'll add more of the scrollbar attributes and corresponding property colors.

Add a textarea element rule to your CSS, as highlighted below, using the same scrollbar properties that you used above for the browser scrollbars, as highlighted below.

<html>
<head>

<style type="text/css">

textarea {scrollbar-3dlight-color:#ffd700;
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f}

</style>
</head>

top‘On this page’ menu

But What Does All This Markup Mean?

I know that some of you want to just snatch the markup and run, but there are more details, if you'd like to dig in more.

Some of the scrollbar attributes are self-descriptive, such as 'scrollbar-arrow-color' referring to the color of the scrollbar arrow. For detailed definitions of each CSS scrollbar attribute, refer to MSDN's CSS Attribute Reference.

As mentioned above, the CSS scrollbar elements are proprietary markup for Internet Explorer 5.5+. Netscape and most other browsers will continue to see the default colors. See the More Information section below for the Q&A about this.

top‘On this page’ menu

Play and Explore

An easy way to see which attribute impacts a specific part of a scrollbar is to play with a great tool provided by Microsoft to generate markup for your own scrollbar colors. While the colors are limited, there is still plenty of room for playing and exploring possibilities.

Microsoft's Scrollbar Colors Code Generator

Have fun exploring! When you're ready to implement this CSS into your pages, keep users in mind and be mindful of using good colors that aren't confusing, especially since colored scrollbars are a newer feature.

top‘On this page’ menu

Further Information

Information, FAQ About the CSS Scrollbar Property as Microsoft “Extensions”

Microsoft's CSS Attribute Reference chart states that the scrollbar property attributes are “available as of Internet Explorer 5.5.” These have NOT yet been proposed for W3C Recommendations, thus marked at Microsoft's site as an “extension.”

What does that mean?
Internet Explorer 5.5+ will recognize the scrollbar property and its attributes, while Netscape and most other browsers will use the browser default. This is also referred to as “proprietary”  1  markup.
If you validate your CSS markup through W3C's CSS Validator, you will get an error message that the property doesn't exist. This is because it's not yet supported via W3C recommendations.
Does that matter?
Those who wish to avoid proprietary markup may prefer not to use this markup.
Will these tags cause problems for other browsers?
No. Other browsers will just skip these tags and use their usual default.
If colored scrollbars will show up to viewers using Internet Explorer 5.5+ but not most other browsers, should I even bother using them?
That's an individual decision often based on your stat logs and percentage of users to your site that use Internet Explorer 5.5+, personal views about using proprietary tags, or desires to use only W3C Recommended markup.

__________
1 Proprietary—A protocol or communications system developed by a company, as opposed to those emanating from a standards organization. Definition from IEC Glossary. For more, see also: Google search - define: proprietary.

top‘On this page’ menuNavigation belowSearch/Sidebar

Articles, Tutorials, Tips:

Most Popular Books

In association with  In Association with Amazon.com 

Our Other Sites

SKDesigns

Effective, accessible, standards-based Web site design since 1996

SKDesigns - skdesigns.com

Brainstorms & Raves

Weblog on Web design, CSS, standards, music, more. By Shirley Kaiser, SKDesigns.

Brainstorms & Raves


Within Articles, Tutorials, Tips:

Within Web Site Resources:
SkipShow or Hide Detailed Navigation