Bagikan melalui

Changing the appearance of the browser scrollbar

  • Artikel

I wanted to call this tip "Why I love Internet Explorer" because you can only do this in Internet Explorer.  I would guess that most, if not all, hard-core Web developers know how to do this, but for any of you who don't and want to know, this tip's for you.

There may be some of you who will want to criticize this tip because it only shows up in Internet Explorer and not any other browser, but using the code provided here doesn't cause any script errors, and if you display a page that uses it in another browser, the browser will just ignore it, so no harm done.

When I first saw a page where the scrollbar was different, I thought, "cool, I want to know how to do that."  I found out that it was very simple.  All you need to do is use one or more of the following seven CSS attributes:

 scrollbar-3dlight-color
scrollbar-highlight-color
scrollbar-face-color
scrollbar-shadow-color
scrollbar-darkshadow-color
scrollbar-base-color
scrollbar-arrow-color

You can change the appearance of the scrollbar for the APPLET, BDO, BODY, DIV, EMBED, OBJECT, and TEXTAREA elements just by putting the CSS attributes into the style attribute of the element, placing them within a STYLE element in the HEAD section of any page, or adding them to an external CSS file.

Note   Some of the above elements only affect a portion of the page, for example the TEXTAREA element, and the appearance of the scrollbars will change only for that element and not the entire page.  To affect the browser window for the entire page, put the settings in the style for the BODY element.

Also, if you want to change the appearance of the scrollbars within an IFRAME element, you would need to put the CSS attributes within the page referenced in the src attribute for the IFRAME element rather than in the page that contains the IFRAME element.  Setting the scrollbar attributes for the IFRAME itself has no effect.

Here's some simple code.  For more information on any of these CSS attributes, see the CSS reference documentation on MSDN.

 <style>
body{
 scrollbar-3dlight-color: red;
 scrollbar-highlight-color: blue;
 scrollbar-face-color: navy;
 scrollbar-shadow-color: black;
 scrollbar-darkshadow-color: yellow;
 scrollbar-base-color: green;
 scrollbar-arrow-color: aqua;}
</style>

Copy and paste this code into the HEAD section of any page, and then open the page in Internet Explorer.  Voila!

The following is an enlarged image of what the scrollbar looks like with these scrollbar settings.  I intentionally specified different colors for each of the CSS attributes in this example to make it easy for you to determine which attribute applies to the different parts of the scroll bar. 

Please don't copy this code wholesale without changing it because this code creates a MUCHO ugly scrollbar, and I don't want to be indirectly responsible for any MUCHO ugly web sites.  However, with a little coordinating of the colors, you can create scrollbars that match the colors in your web site.  Very cool!

Comments

  • Anonymous
    September 03, 2004
  1. "CSS reference documentation on MSDN" is not CSS reference, it's Microsoft's version of CSS. The actual CSS reference can be found at http://www.w3.org/TR/CSS1 for CSS 1 and http://www.w3.org/TR/CSS21/ for CSS 2.1.

    2. There's a reason why common UI parts look the same across applications. Changing the tool bar (changing the color will also change the style in WinXP) goes against Windows UI principles. If something is a scroll bar than it should look like a scroll bar, period. So once again: cool - maybe, usefull - not really.
  • Anonymous
    September 03, 2004
    I can't stand it when sites do this.
  • Anonymous
    September 03, 2004
    Heh, one more reason to keep using Mozilla ;-)
  • Anonymous
    September 04, 2004
    Some people are still big Internet Explorer (IE) fans. That is fine I suppose, each to their own. Today Lisa Wollin is going to show us how to change the appearance of the browser scrollbar for IE. A little technical...
  • Anonymous
    September 04, 2004
    The comment has been removed
  • Anonymous
    September 04, 2004
    Well known thing...
    the best of all would be if you tell how to colorize scrollbar in desctop application using vc++...
  • Anonymous
    September 07, 2004
    'I wanted to call this tip "Why I love Internet Explorer" because you can only do this in Internet Explorer'
    Opera can do it too. Pretty sure Konquerer also can.
  • Anonymous
    September 08, 2004
    The comment has been removed
  • Anonymous
    June 03, 2005
    The comment has been removed
  • Anonymous
    October 14, 2005
    The comment has been removed
  • Anonymous
    March 03, 2006
    The comment has been removed
  • Anonymous
    April 13, 2006
    Thanks. I too found your article informative. I feel most people that post negative comments as above must have some type of personal problems. They probably surf forums to correct spelling errors too. By the way, this page ranked in the top 10 of a Google search.
  • Anonymous
    July 03, 2006
    Thanks!!  I was looking everywhere for info on how to change the scrollbar color.  This was very helpful information.   You even included notes on how to change the scroll on an Iframe!!

    Thanks you again!
  • Anonymous
    July 13, 2006
    pls need help i used the code for changing scrollbar  colors with an iframe but nothing seems to come up right.Also i have my scrollbar on the left but it affects the inserted texts into the iframe. any suggestion if i should use something else intead of an iframe or textarea which i tried as well.pls help
  • Anonymous
    August 08, 2006
    Can i simply insert this script into a html document.  Sorry if this is a stupid question but i have only just started coding.  If so any chance someone could give me an example??
  • Anonymous
    August 11, 2006
    Anyone know how to change the little arrows to a picture? Or the middle slider button to a picture? or maybe have the track be a picture or pattern? For example a Christmas theme where the track could be candy cane, etc. My step father always use to say "make yourself useful as well as ornamental", how about ornamental as well as useful?