Scrollbar Colors with CSS
You can use the capability of CSS to alter the scrollbar colors of your site. Of course, this depends on using a browser that supports scrollbar painting. There are eight scrollbar properties that can alter the color. The table below shows those properties:
| Property | Description | Values |
| scrollbar-base-color | Specifies the overall coloring used in the scrollbar | #RRGGBB (hex color values) #RGB (RGB color values |
| scrollbar-face-color | Specifies the color of the scrollbar and arrowbox face | #RRGGBB (hex color values) #RGB (RGB color values |
| scrollbar-arrow-color | Specifies the color of the arrows | #RRGGBB (hex color values) #RGB (RGB color values |
| scrollbar-track-color | Specifies the color of the scrollbar sliding track | #RRGGBB (hex color values) #RGB (RGB color values |
| scrollbar-shadow-color | Specifies the color of the right-side shadow of scrollbar elements | #RRGGBB (hex color values) #RGB (RGB color values |
| scrollbar-highlight-color | Specifies the color of the left-side glossy highlights of the scrollbar elements | #RRGGBB (hex color values) #RGB (RGB color values |
| scrollbar-3dlight-color | Specifies the color of the spectral lighting | #RRGGBB (hex color values) #RGB (RGB color values |
| scrollbar-darkshadow-color | Specifies the color of the darkened shadow color under the scroll bar | #RRGGBB (hex color values) #RGB (RGB color values |
Specify the scrollbar properties in the body element of your page style. For instance:
body { scrollbar-base-color: #005500; }
would skin the scroll bar with a dark-green theme
The folks at Iconico created a page that allows you to dynamically generate the CSS code for your body element's scrollbar properties based on color values you input. You can find the CSS scrollbar generator at:
