[Cascading Style Sheets: Contents]
[Previous: More on Selectors]
[This Page: Changing Scrollbars]
[Next: Form Elements]
You will notice that most of the scrollbars on this page are coloured, mostly with the same design. (Scroll down to view). (You might wish to look at this page, in the JavaScript section, which enables you to dynamically select colours and change scrollbar properties). The body tag is given the class bars:
<
body bgcolor="white" class="bars" >And this class is declared in the HEAD of this document as follows:
<
style><!--
.bars {
scrollbar-3dlight-color:;
scrollbar-base-color:'red';
scrollbar-darkshadow-color:'yellow';
scrollbar-face-color:'red';
scrollbar-arrow-color: white;
scrollbar-highlight-color:orange;
scrollbar-shadow-color:darkbrown;
scrollbar-track-color: pink;
}
-->
</style>The colours are chosen in part to make it easier to understand what parts are coloured what. For instance, you can understand "scrollbar-track-color:pink" by noticing which parts of the scrollbars are pink. And you can understand "scrollbar-face-color:red" by noticing which parts of the scrollbars are "red".
I said that most of the scrollbars on this page have the same design, and the part that doesn't is the iframe part, which colours its scrollbars according to the design on the page that is loaded in the iframe. The page loaded in the iframe has the same class name, "bars", but with different values.
To change the colour of the scrollbars in an iframe, you need to put the style in the page that is loaded. For instance, in this case in the file "myIframePage"
If you wish to change the scrollbar colours on your pages, please be careful that you choose colours that enable the user to see the parts of the scrollbar!