Home

CSS Examples Custom scrollbar colors

Date: 10/19/2004 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.

#1: Tom on 10/21 at 02:30 PM

Great tutorial but i have netscape
not internet explorer

#2: Joe on 12/05 at 04:34 AM

It's great but does not work in Mozilla Firefox which i have.

#3: Francis on 01/24 at 01:21 PM

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.

#4: Bryan on 01/27 at 03:28 PM

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?

#5: Digit on 02/24 at 01:25 AM

Digit is right. Internet Exploer should also be able to use :hover on any element.

#6: Craig on 04/04 at 06:01 PM

I put on my page - offline, but no effect at all. :( I used IE 6.0, Dreamweaver

#7: Riedle on 04/06 at 10:14 PM

Have a look here for the code for Mozilla: http://www.planetpenguin.de/artikel-46.html

#8: Tacho on 05/03 at 10:43 AM

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

#9: Eric Johnson on 05/25 at 10:27 AM

Any idea how to customise the scrollbars of a <SELECT> drop down list? The same approach doesnt work for drowdown lists :(

#10: dropdown on 06/02 at 12:46 PM
Commenting is not available in this weblog entry.


Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site