Dynamic Drive CSS Library- Custom scrollbar colors

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Other: Here

Custom scrollbar colors

Author: Dynamic 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 valid 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. Due to this divergence in implementation, an easy solution is just to assign both the HTML and BODY tags the relevant scrollbar coloring CSS properties.

Scrollbar coloring via CSS is only supported in IE.

The CSS:

Code Info

Rate this code:

Date Posted: 05/02/2006

Revision History: None

Usage Terms: Click here

Your Comments (57)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 6 pages 1 2 3 > Last »

Just a note for all of you Firefox fans that this will not work as this was made specifically for Internet Explorer. Mozilla Firefox does not have the ability to change colors of it's scroll-bars.

Posted by Dren T. Martin on 05/10, 01:15 PM

i am brazilian, excuse my low english, but scrollbars works in opera yes

Posted by supported in Opera Web Browser YES on 05/19, 01:55 PM

Yes, you are correct. Opera does support scrollbar colorization.

Posted by Dren T. Martin on 05/19, 06:55 PM

How do I change the scrollbars within framesets?
The indexpage does not use the body-tag and the html-tag comes before the style declaration. I've tried using body { scrollbar... } and html { scrollbar ... },
but both don't work.

Posted by Harald Geersen on 05/28, 01:18 PM

If you are talking about putting a scrollbar color in, say, an iframe, you have to put the CSS in the frame also. You have to use two the stylesheet twice, once on the index page, for example, and use another in the frame within the page. Use have to use the CSS in what ever frame you want a custom color.

Not sure if that was what you asked.

Posted by ACWebmaster on 06/01, 07:16 PM

for the track colour, is there some way to make it transparent? instead of white or something...?

Posted by Mandy on 06/07, 12:49 AM

I've never seen a transparent scrollbar. I doubt that it can be done. But ya never know. Someone else may know if you can do it.

Posted by ACWebmaster on 06/07, 07:22 AM

@Mandy: Are you meaning so you can't see it so it blends in with the page? If so, you can't make anything transparent on the scrollbar, but you can set it to the same background color as your webpage which will make it appear transparent. I hope this helps! :)

Posted by Dren T. Martin on 06/07, 09:40 AM

As in transparent such as viewed on the content portion of this page? http://www.dsdk12.net/~afjrotc/. I did design this page (with some assistance) and I know that transparency is possible.

Posted by Josh on 06/24, 02:05 PM

I guess we arent suposed to post questions here...

but is there a way to make the scrollbar bigger?...a width or something?

Posted by melinda on 06/24, 09:17 PM

Comment Pages 1 of 6 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.