- You are here:
- WebsiteTips Home
- Articles, Tutorials, Tips
- CSS
- Colored Scrollbars
Coloring Your Scrollbars with CSS
by Shirley E. Kaiser, M.A., SKDesigns
Published March, 2001. Updated March, 2006. Copyright © 2001-2013, 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.
On this page:
- Here are the Style Rules
- Browser Scrollbar
- Forms Scrollbar
- But What Does All This Markup Mean?
- Play and Explore
- Further Information
- Information, FAQ About the CSS Scrollbar Property as Microsoft “Extensions” (Questions and Answers about which browsers support the
scrollbarproperty)
- Information, FAQ About the CSS Scrollbar Property as Microsoft “Extensions” (Questions and Answers about which browsers support the
Books on CSS
Recommended by WebsiteTips.com
See more CSS books, read reviews, why we recommend each book
In association with 
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:
- For the browser scrollbar colors, add the
scrollbarproperty attribute rules to thebodyelement. - For the
textareascrollbars, add thescrollbarproperty attribute rules to thetextareaelement.
As you know if you've used CSS:
- The
styleelement tag goes between theheadelement tags near the top of your HTML markup as shown in the examples throughout this tutorial, or - For an external style sheet, just add the rules to your style sheet. Here's a sample. (A separate popup window will open.)
Tip:
Wondering what colors to use? Need to know corresponding HTML color codes? Visit WebsiteTips.com's Web Site Resources
Color Color Tools Section for:
- WebsiteTips.com's free online or printable color charts and elsewhere
- WebsiteTips.com's free online color scheme tools, including our
- Color Blender Color Scheme Tool (choose 2 colors, tool generates 1-10 shades between them)
- Colormatch Remix Color Scheme Tool (choose schemes with 9 harmonious colors)
- Colour Scheme Chooser (monochromatic, analogic, complimentary, split complementary, triadic, and double contrast colour schemes)
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:
- Un-colored Scrollbars (W3C)
- Scrolling and Scrollbars (456 Berea Street)
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)
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.
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...
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.
New and Popular Books on CSS
Recommended by WebsiteTips.com
Read reviews, why we recommend each book.
In association with
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>
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>
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.
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.
Further Information
- CSS Tutorials, Books, Resources section at WebsiteTips.com
- Color Tutorials, Books, Resources section at WebsiteTips.com
- MS: Generate Scrollbar Colors Markup
Try out color combinations here, markup is generated, and you can copy/paste the markup! - MSDN's CSS Attribute Reference
Explore what all the CSS attributes are, what they mean, and view samples. - What's New In Internet Explorer 5.5
Listing of all the new tags and scripts added for IE5.5.
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
scrollbarproperty 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.
