home > css > creating custom scroll bars

creating custom scroll bars

This section contains guidelines on how to create a custom Internet Explorer scroll bar (this css technique only works in Microsoft Internet Explorer version 5.5). You can customize the face color, background color, shading, highlights to match the look and feel of your web site. This technique is can also be applied to the scroll bars on any html element which can have scroll bars, such text areas on forms. Be aware that it is not valid css though.

create the css style for custom scroll bars

Add the following in your css style sheet to the html element you want to have custom scroll bars:

body {
scrollbar-base-color: #663366;
scrollbar-face-color: #99CCCC;
scrollbar-track-color: #996699;
scrollbar-arrow-color: #330033;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-shadow-color: #663366;
scrollbar-darkshadow-color: #000000;
}

The above attributes are used on this site, see the screen shot below if you're using a browser other than Internet Explorer 5.5 and above:

close up of custom scroll bar

tips on creating custom scroll bar colors

• You can use hex value colors or css color names
• Try to make sure you keep the 3D effect that default scroll bars have
  • Visitors are used to scroll bars being 3-dimensional - more user friendly
• Make sure that you check the scroll bar is visible/usable for color-blind visitors
  • Take a screen shot and desaturate the color (make black and white/monochrome) in a graphic software package to see if it's still obviously a scroll bar