Two columns Three columns Mixed cols and rows Gallery Archives Clean & Clear Dark or Black High Contrast/ Impact Blog Designs New Corporate/ Professional Unconventional Designs Liquid layouts Web Design Firms Our Favorites What's Popular Last 20 submissions
Horizontal Menus Vertical Menus Multiple/ Nested Levels
CSS Compressor Image to Color Palette Tool

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 10:30 AM

Great tutorial but i have netscape
not internet explorer

#2: Joe on 12/04 at 11:34 PM

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

#3: Francis on 01/24 at 08:21 AM

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 10:28 AM

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/23 at 08:25 PM

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

#6: Craig on 04/04 at 02: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 06:14 PM

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

#8: Tacho on 05/03 at 06: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 06: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 08:46 AM

CSS Forums

CSS Forums: latest threads Last Post Info
Tables or Div's? What's you opinion? (24) 07/04/2009 03:07 am
By: HannahLyn
IE6 vs. DIV height 100% (1) 07/03/2009 11:17 am
By: Emerson
Font doesn't diplay in Firefox? (10) 07/02/2009 03:27 am
By: spongebob
Help regarding horizontal menu lists (5) 07/02/2009 03:04 am
By: tenchin
how to make video resize when you click on it. (1) 07/01/2009 02:32 am
By: ted1067