Changing the Scrollbar s Appearance (IE Windows Only)

Changing the Scrollbar's Appearance (IE Windows Only)

Microsoft Internet Explorer (versions 5.5 and later) for Windows allows you to set the color for all or part of the scrollbar (Table 8.7). These properties can be applied to the main scrollbar for the page or any scrollbar within the page, such as text-area scrollbars. They are not, however, a part of any W3C standard, so will not work in any browsers other than Internet Explorer. However, adding this code will not interfere with other browsers.

Table 8.7. Scrollbar Color properties
Property	Location
scrollbar-3dlight-color	Outer top and left sides of scroll face; used to create 3-D effect
scrollbar-arrow-color	Arrows in boxes
scrollbar-base-color	Color used if no other
properties set
scrollbar-darkshadow-color	Outer bottom and right sides of scroll face; used to create 3-D effect
scrollbar-face-color	Flat areas in slider, except for track
scrollbar-highlight-color	Inner top and left sides of scroll face; used to create 3-D effect
scrollbar-shadow-color	Inner bottom and right sides of scroll face; used to create 3-D effect
scrollbar-track-color	Flat area that defines the scroller

In this example (Figure 8.11), the scroll bars in the form text area and the main window have been altered from their default appearance.

Figure 8.11. The main scrollbar for the page is red and the 3D appearance for the text-area scrollbar has been reversed.

To set a scrollbar's colors:

scroll-base-color: red;

Type the scroll-base-color property name, followed by a colon (:), and then a color value and a semicolon (;). This will set the overall color scheme for the scrollbar (Code 8.6).

Code 8.6. You can control the color of each part of the scrollbar in Internet Explorer for Windows.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Changing the Scroll-bars Appearance</title> <style type="text/css" media="screen"> body {      scrollbar-base-color: red; background-color: #fff; } textarea {      scrollbar-3dlight-color: black;      scrollbar-arrow-color: white;      scrollbar-darkshadow-color: white;      scrollbar-face-color: #cccccc;      scrollbar-highlight-color: black;      scrollbar-shadow-color: white;      scrollbar-track-color: gray; } </style> </head> <body > <textarea style="float:left" name="textareaName" rows="20" cols="45"> 'Who cares for you?' said Alice, (she had grown to her full size by this time.) 'You're  nothing but a pack of cards!' </textarea><img src="/books/3/292/1/html/2/alice42a.gif" alt="Alice in Wonderland" height="480" width="360" /> </body></html>

scrollbar-3dlight-color:black;

Type one of the scrollbar color properties, followed by a colon (:), and then a color value and a semicolon (;). These are used to set the color of individual elements in the scrollbar. You do not have to use all of the scroll properties in a definition, but the browser will use default values for those left out.

Tip

The "scroll-face" of the scroll bar includes the 3D beveled edges of the up/down arrows and scroller.