midwest web design

Creating colored scrollbars

If you have been creating websites for yourself or others, you always try to find and think of creative ways to enhance your page visually. One such way is to create a colored scrollbar through CSS. In this short tutorial, we’ll examine how to style our scroll bar with CSS.

Finished Page

Printable Version
Word PDF
Download Project Files
Zip

Here's how it works

We use our body as a selector and add the following CSS:

body{
scrollbar-face-color:  #cc9900; 
scrollbar-shadow-color:#000000;
scrollbar-highlight-color:  #000000; 
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color:#000000;  
scrollbar-3dtrack-color: #666666;
scrollbar-arrow-color:  #000000;
}

The CSS should be straight forward. The key is to use scrollbar and then append on the necessary attributes of the scrollbar, such as face, track or arrow colors. Colors can be expressed as hexadecimal or named, such as blue, red, green.

Embedded or External?

You may declare this either way. If you want to color your scrollbar for multiple pages; then use external, otherwise, if it’s for one page, use embedded.

Disadvantages to using colored scrollbars

This method is not supported by the following browsers:

This is not supported by Internet Explorer 6 if you use a full DOCTYPE. DOCTYPE stands for Document which is short for Document Type Declaration. A DOCTYPE is a way to ensure all markup tags are correctly created, formed, nested and closed, as well as using correct CSS. For a discussion on DOCTYPE please visit: http://alistapart.com/stories/doctype/

You might be wondering how the finished file works if Internet Explorer 6 does not support colored scrollbar using a full DOCTYPE. There are two options which are discussed below:

1). Replace the body selector with html. Internet Explorer allows you to style the HTML element as a selector because it believes this element is a child of another parent element. If you’re confused don’t be, there is no higher parent element than the HTML element. While this method will work, it will not validate.

2) A cleaner approach if you need or are concerned with validation is conditional comments. Conditional comments are a function built into Internet Explorer and are only visible in Internet Explorer. Thus, we can wrap our html selector inside a conditional comment and it will pass validation. However, if you need validation, you’ll have to embed these workaround, since conditional comments don’t work in external style sheets.

We simply add the following code inside the opening and closing head tags:

<head>
<!--[if IE]>
<style type="text/css">
html{scrollbar-face-color: #cc9900; 
scrollbar-shadow-color:#000000;
scrollbar-highlight-color: #000000; 
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color:#000000; 
scrollbar-3dtrack-color: #666666;
scrollbar-arrow-color: #000000;}
</style>
<![endif]-->
</head>

If you have questions, contact me.

top of page

Thank you for visiting Fabrizio.com - Come back again soon.