Inside
Technique : IE5.5 Custom Scrollbars
Internet Explorer 5.5 adds 8 new CSS properties for controlling the color of your scrollbars. Any scrollbar on your page can be customized simply by setting a few properties making it easy to give your page or site its own personality.
The best way to learn about these properties is to experiment with them. If you areusing IE 5.5, you can customize this pages scrollbars by entering colors for each of the properties below. If you create a scrollbar you like, just copy the small stylesheet to your web-page.
| Color | Attribute | Description |
|---|---|---|
| scrollbar-3dLight-Color | Sets or retrieves the color of the top and left edges of the scroll box and scroll arrows of a scroll bar. | |
| scrollbar-Arrow-Color | Sets or retrieves the color of the arrow elements of a scroll arrow. | |
| scrollbar-Base-Color | Sets or retrieves the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows. | |
| scrollbar-DarkShadow-Color | Sets or retrieves the color of the gutter of a scroll bar. | |
| scrollbar-Face-Color | Sets or retrieves the color of the scroll box and scroll arrows of a scroll bar. | |
| scrollbar-Highlight-Color | Sets or retrieves the color of the top and left edges of the scroll box and scroll arrows of a scroll bar. | |
| scrollbar-Shadow-Color | Sets or retrieves the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar. | |
| scrollbar-Track-Color | Sets or retrieves the color of the track element of a scroll bar. |
Since these CSS properties are only supported by IE 5.5, they will be ignored by Netscape and earlier versions of Internet Explorer. To better isolate features that are browser-specific, we recommend you do not combine these attributes with others in a single rule. For example, if you want the text on your page to be NAVY and also want to define custom scrollbars, do it as follows:
This separation will ensure that the navy text color will be applied to all browsers that support that CSS attribute. CSS defines that if an unsupported or invalid attribute is specified in a rule the entire rule should be ignored. Therefore, combining these two rules into one may cause the color to be ignored even if the browser support setting the color.
Click on a color name, or a hex value, to see the color as the background color along with different text colors.