WWW FAQs: How do I change the color of the scroll bar?


2006-05-31: Microsoft Internet Explorer (versions 5.5 and newer) allow custom scroll bar colors. This is not part of the CSS standard, and other browsers do not support it. You should think twice before changing web browser scroll bar colors, because it can cause confusion for users and may make your site appear unprofessional.

To set the scroll bar colors, just set the appropriate CSS attributes. There are six attributes that affect scrollbar colors. The first three are the most important. If you don't set the "shadow," "darkshadow," and "highlight" colors, suitably brightened and darkened versions of the "base" color are automatically used.

AttributeControls
scrollbar-arrow-colorColor of scrollbar arrow
scrollbar-face-colorForeground color of scrollbar, surrounding the arrow and on the draggable "thumb;" outside the thumb, blended in a 50% stipple pattern with the background or "base" color
scrollbar-base-color Background color of scrollbar, appears in 50% stipple pattern with the "face" or foreground color
scrollbar-highlight-color"Highlight" color used to create a 3D effect
scrollbar-darkshadow-color"Dark shadow" color used to create a 3D effect
scrollbar-shadow-color"Shadow" color used to create a 3D effect

But how do we set these attributes? As always with CSS, we can do it using a style attribute, or we can do it the classy way (pun intended!) with a style sheet. Here's the quick-and-dirty way to set the scroll bar colors for an entire page, as well as any scrollable textareas and divs within that page.

In this example, we're setting styles for the one and only <body> element in the page, which contains all of the page's content. Don't just copy and paste this and create a second body element -- that's not correct. Add the styles to your existing body element. If you have other styles set for it already, just add these to the semicolon-separated list.

<body
  style="scrollbar-base-color: black;
    scrollbar-arrow-color: white;
    scrollbar-face-color: blue">

We use named colors in these examples, but you can also specify "hex colors" in the usual way.

What if you want to use a different scrollbar color for a particular <textarea> element? No problem! Just set the style attribute of that particular textarea.

Of course, if you prefer, you can also set these style attributes in a style sheet.

Scriptmania offers a simple scrollbar color generator.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!