Scroll bars colors are a style and can be placed at the head of a page or in
a style sheet. The scroll bar has several areas to color indicated by the list
below.
- scrollbar-3dlight-color
- scrollbar-darkshadow-color
- scrollbar-base-color
- scrollbar-highlight-color
- scrollbar-track-color:
- scrollbar-arrow-color
- scrollbar-face-color
- scrollbar-shadow-color
On your external style sheet you select the element you want to color the
scrollbar on such as body{} or iframe{} or textarea{}.
Then you can list the scrollbar properties you want to color between the
brackets {}. Follow each scrollbar property with a colon: and add your hex value
or valid color name followed by the semicolon;.
The css for the scrollbar on the right looks like this:
body {
scrollbar-3dlight-color: #CCCC99;
scrollbar-arrow-color:#CCCC99;
scrollbar-base-color: #CCCC99;
scrollbar-darkshadow-color: #666633;
scrollbar-face-color:#CCCC99;
scrollbar-highlight-color:#CCCC99;
scrollbar-shadow-color: #666633;
scrollbar-track-color: #999966;
}
Below is a scroll bar generator for you to create scrollbar styles for your
site for the head of your document. You can also use this code, edited for an
external sheet to do the same.
|
