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 propertiesProperty | 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: 1. | 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 & 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 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> |
| 2. | 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 |