Go Back to Dynamic Site Solutions :: CSS
The scrollbar color properties are an Internet Explorer extension to CSS. They are supported by IE5.5+/Win and have partial support in Opera 7.0+ and Konqueror 3.4+. For Opera 7.0x and 7.1x you have to manually edit one of the .INI files to enable them. In Opera 7.2+, there is a checkbox in Opera's preferences. Since they are not included in CSS2, nor in any other of the W3C's CSS recommendations, they are not considered to be valid properties.
In Standards Compatibility mode IE6 needs the scrollbar colors to be
applied to <html>. For IE6 in Backwards Compatibility mode
and IE5.5 they need to be applied to <html> or
<body>. Apply them to both, just to be sure. The scrollbar
colors for <iframe>s are set by the document loaded into
the <iframe>, not the document which contains the
<iframe>. For Opera 7.20+, when in Standards Compliance mode,
Opera only supports scrollbar-*-color properties when they are
used inline on elements other than <body> and <html>, including <textarea>. In quirks mode,
Opera supports them in embedded and linked stylesheets as well as inline on
<body>. Opera 7.0x and 7.1x have the same support in
Standards Compliance mode and in quirks mode, which is the same as Opera 7.20+
support in quirks mode. Unlike IE5.5+, Opera doesn't support manipulating them
through <objectRef>.style.scrollbar******Color at all.
Konqueror 3.4+ supports some of the properties on <body>
when in quirks mode. Unlike Opera, Konqueror 3.4+ does allow the properties to
be set via the style object in JavaScript; however, it does not support them on
elements with overflow:auto. Konqueror supports scrollbar colors
on <textarea> in quirks mode. Opera supports them on <textarea> in quirks mode when they are specified for <body> or when specified inline but not via a rule for textareas in a stylesheet.
Only IE7 (tested in IE7 beta 2) supports scrollbar colors on the select element and only when the size is greater than 1 (size defaults to 1) and/or when multiple is set. Otherwise IE7's support seems to be the same as IE6's.
Note: This page has a complete doctype which makes browsers display it in Standards Compliance mode.
The example below is of a paragraph (<p>) in a
<div> which has overflow:scroll set.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec porta odio ullamcorper lorem. Sed consequat, diam ut malesuada tincidunt, metus libero tincidunt neque, non viverra lectus libero at dui. Aenean in neque id dui ullamcorper malesuada. Nullam sed wisi. Donec urna lectus, sagittis vitae, accumsan vitae, convallis non, elit. Vestibulum commodo pede non neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas est diam, tristique id, sollicitudin nec, aliquam non, orci. Quisque nibh erat, vulputate vitae, tempus suscipit, tincidunt vitae, quam. Donec at sapien vel sem consequat tincidunt. Suspendisse feugiat. Phasellus suscipit.