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.
| Attribute | Controls |
|---|---|
| scrollbar-arrow-color | Color of scrollbar arrow |
| scrollbar-face-color | Foreground 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!
Follow us on Twitter | Contact Us
Copyright 1994-2012 Boutell.Com, Inc. All Rights Reserved.