This is the code you need to put in the <head> part of your document, or into your existing stylesheet if you have one.
Note that most other sites tell you to apply these styles to the body element. If done this way, the properties will only work in IE6 in ¡®quirks mode¡¯ ¡ª that is, when the DTD is incorrect. If you¡¯re using a full DOCTYPE (HTML 4.01 | XHTML 1.0) and apply it to the body of the document, they will not be coloured, as the properties are non-standard CSS. However, it¡¯s been found that if you apply them to the html element, due to some bug in the way IE6 works out inheritance, the styles will be applied after all.
Apply the CSS attributes on your html tag as below will affect all the scrollbars on your page, including any horizontal and mini-scrolls that appear for textareas or iframes.
html {
scrollbar-base-color: #9999cc;
scrollbar-arrow-color: white;
scrollbar-track-color: #ccccff;
scrollbar-shadow-color: black;
scrollbar-lightshadow-color: black;
scrollbar-darkshadow-color: gray;
scrollbar-highlight-color: white;
scrollbar-3dlight-color: black;
}
Of course, you can edit any of those values in HEX or color-name codes to suit your site. Note that you can specify the shadow color as one color, or go more in-depth and pick a light shadow and a dark shadow. The highlight option above is the strip that flows down the left side of the moveable bar. The ¡®3dlight¡¯ is the leftmost strip, which is a part of the highlight and very narrow.
Setting an iframe or textarea scrollbar is the same as any other element. Either do it with classes, or add inline-style code into the tag itself.
Diagram
scrollbar-base-color: red;
scrollbar-arrow-color: white;
scrollbar-shadow-color: blue;
scrollbar-lightshadow-color: green;
scrollbar-darkshadow-color: blue;
scrollbar-highlight-color: yellow;
scrollbar-3dlight-color: black;
The red/yellow area down here is a dithered blend of your base and highlight colours. Control it separately with scrollbar-track-color: blue.
discuss this topic to forum
