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:

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 &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>

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

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





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net