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 2 of 6 pages < 1 2 3 4 > Last »

@melinda. Not as much as I can figure or know. The only way I would think to change the width of the scrollbar would be to create a custom scrollbar. I've done some googling on this before and come up with very little of anything.

Posted by Josh on 06/24, 10:18 PM

if you want to validate your web site with w3c you will get errors if you use this classes cause they are only suported by ie5.5 and above and they are not in the w3c standards

Posted by wael on 06/30, 02:17 PM

This script was a great help

I recomend it for advanced users

Posted by p on 07/15, 06:00 AM

Hi! Is it possible putting a scrollbar inside a table?
If so, how can i do that? Can you give me the code? tnx!

Posted by carol on 08/19, 04:33 AM

No i don't think there is... but i what i would do is put an iframe inside the table's cell. Hope this helps...

Posted by Raggfx@aol.com on 08/26, 12:51 PM

I need to see the scroll bar permanently in a mozilla browser even when there is no contents for scrolling down. I should atleast see the scroll bar area without the inner tab for scrolling. Can somebody help me on this? For IE, I have included the syntax - Scrollbar = 'yes' but this does not work for mozilla.

Thanks
Xmails

Posted by Xmails on 09/06, 01:57 AM

what do you mean by iframe? as in like frameset? insidea table? really? i can do that? how? ^_^ tnx for the reply!

Posted by carol on 09/08, 02:18 AM

OMG ITS TRANSPARENT the josh dude hehe how do u do it? can u tell me pleeeeeeeeeeeeeeeeeeeeeeeeeeeeeease =D

Posted by Mandy on 09/09, 07:47 AM

Works in IE but not on safari for Mac

Posted by PJ on 09/17, 12:04 PM

just a heads up, if you wish to have valid css, this code will kill that for you. i use it buit my css validator will ayn those tags are incorrect.

I found a javascript replacement but it only supports html at the moment.

http://www.webdevtips.co.uk/webdevtips/codegen/scroll.shtml

Posted by ed on 10/12, 11:49 PM

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

Commenting is not available in this weblog entry.