Scrollbar styles

Colouring the scrollbar in IE 5.5+ and Opera

The IE 5.5+ and Opera scrollbars can be coloured by setting the styles as shown in the diagram to the left. Setting this for the root element will colour all scrollbars on the document. Individual scrollbars can be coloured by applying the styles to their respective element (in Opera, this is ignored if specified in a stylesheet, but works if it is specified inline).

If scrollbar-track-color is not specified, it will be made up from scrollbar-face-color and scrollbar-highlight-color as shown here.

If the content is not large enough, the thumb of the scrollbar will not be shown and the arrow will appear greyed out. The greyed out arrow is made from scrollbar-shadow-color with a 'shadow' made from scrollbar-highlight-color.

If scrollbar-base-color is specified, it will be used for scrollbar-face-color and scrollbar-3dlight-color unless those are explicitly defined. In Internet Explorer, it will also tint scrollbar-highlight-color and scrollbar-shadow-color unless those are explicitly defined. It will also turn scrollbar-darkshadow-color black if it is not already (OS dependent), unless it is explicitly defined.

The area in the corner between two scrollbars takes its colour from scrollbar-face-color in Internet Explorer and the element background colour in Opera 7+.

When the buttons, but not the thumb, are clicked, their 3dlight and darkshadow colours are replaced with their shadow colour and their highlight and shadow colours are replaced with their face colour.