Jessett.com home  

css

getting started
css style properties
browser support
css classes
borders
link styles
images as bullet points
first letter/line pseudo element
custom scroll bars
css and dreamweaver

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:

Screen shot of custom scroll bars

close up of custom scroll bar

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