CSS Examples Custom scrollbar colors
Author: CSS Drive
In IE5.5+ and above, you can use CSS to customize the color of the scrollbars on the page, which includes various components of the scrollbar. The below CSS shows the relevant CSS properties for scrollbar coloring. Note that if your page uses a doctype that triggers a "Strict" mode in IE, the scrollbar properties need to be assigned to the "HTML" tag instead of the conventional "BODY" in order to work.
The CSS (for non "strict" doctypes):
body{
scrollbar-face-color:#EBF5FF;
scrollbar-base-color:#EBF5FF;
scrollbar-arrow-color:black;
scrollbar-track-color:#F3F3F3;
scrollbar-shadow-color:#EBF5FF;
scrollbar-highlight-color:#EBF5FF;
scrollbar-3dlight-color:#78AAFF;
scrollbar-darkshadow-Color:#78AAFF;
}
The CSS (for "strict" doctypes):
html{
"
"
}
Comments (21)
Please note that this isnt valid CSS, scrollbar definitions are proprietary extensions created my Microsoft.
Great tutorial but i have netscape
not internet explorer
It's great but does not work in Mozilla Firefox which i have.
Make sure you read everything instead of jumping to the code. It states above that these rules apply to IE 5.5 +. Many sites post browser specific code because it can be helpful to some.
I agree with Joe. Stupid stuff: Netscape uses the :hover on any element, while IE only does that for links. I still like Netscape-- no security holes, right Bill Gates?
Digit is right. Internet Exploer should also be able to use :hover on any element.
I put on my page - offline, but no effect at all. :( I used IE 6.0, Dreamweaver
Have a look here for the code for Mozilla: http://www.planetpenguin.de/artikel-46.html
im a firefox user as well and i love it, microsoft is starting to announce IE7.0 in press releases and it looks pretty mad, and it doesnt use activeX for once
Any idea how to customise the scrollbars of a <SELECT> drop down list? The same approach doesnt work for drowdown lists :(