Scrollbar Colours

FrontPage Index
Related Topics:
Chart of Named Colours.
Books on Web Design.

Coding Note

Sometimes lines of code can be very long! Where I have had to break a line of code to fit it on the page I have used the symbol to indicate that the line below is a continuation and that the code should be written as a single line

<Blah blah blah 
blah>

should be written:

<Blah blah blah blah>

Controlling Scrollbar Colour

If you use Internet Explorer 5.5 or later, you can't fail to have noticed the latest web designer fad, coloured scrollbars. The last time I looked, this feature wasn't supported by Netscape (yawn!) but if it catches on I guess they guys at Netscape might include it in the next version.

What does it look like?

I have not (yet!) given in to the temptation to include coloured scrollbars on my own pages, but I have included some demos here. If you are using an older version of Internet Explorer or Netscape the demos won't appear any different. These screenshots will show you what you are missing:

'base' = (#000000), 'arrow' = orange (#FFA500)

'base' = (#000000), 'arrow', 'highlight', 'shadow' = orange (#FFA500)

'base' = white (#FFFFFF), 'arrow' = red (#FF0000), 'highlight' = (#000000)

'base' = #9999EE, 'body bgcolor' = #EEEEFF

The screenshots give an idea of what can be achieved by creating a custom scrollbar colour scheme and combining it with the colour scheme of the page itself.

The technique isn't limited to the scrollbars of windows. They can be applied to Inline Frames, which are generated with the <IFRAME> tag, spans generated with the <SPAN> tag and text areas, generated with the <TEXTAREA> tag and normally found on web page forms.

The text boxes below are created using inline frames (they are not screenshots!)...

If you want to know how to create inline frames on your web pages, take a look at my Inline Frames Tutorial.

What Can Be Controlled?

The colour of every part of the scrollbar can be defined individually. In the screenshots below each attribute is shown coloured red. The remaining parts of the scrollbar show the default colours:

Base	Face	Arrow	3dlight	Highlight	Shadow	DarkShadow

Scrollbar Colour Tester

Combinations of different colours can be used to achieve the desired effect. Try out the tester below. I have used a limited selection of named colours (there are a total of 140 named colours available) although a wider range of colours can be specified with the usual RGB and Hex notations. There is a complete chart of named colours further down the page. This example uses <SPAN> to create an area to display the results:

Select a Colour Scheme

View the Result

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

Here's the code to produce your colour scheme on web page...
==================
<BODY STYLE="
scrollbar-base-color: ;
scrollbar-face-color: ;
scrollbar-arrow-color: ;
scrollbar-3dlight-color: ;
scrollbar-highlight-color: ;
scrollbar-shadow-color: ;
scrollbar-darkshadow-color: ">
==================
Remember to write the code as a
single line. I have had to break
the line here to fit it in the space
available. It's usually OK to split
a line of HTML code as long as you
don't split it it between the < >
brackets of a tag.

Use the selectors above to choose a colour scheme then choose page text and background colours from the selectors below and click the Build Page button to display a new window with scrollbars and content to match your choice [NOTE: Close the pop-up window before trying again.]:

Build a Web Page

text color
background color

Writing the Code

Scrollbars can be coloured wherever they appear: on windows, inline frames, spans and text areas. Although the principle is the same, I have included an example of the code for each.

There are 7 different elements to the scrollbar and each can be referenced and coloured separately:

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

If no colour is specified for a particular element the default colour is used.

Colouring Window Scrollbars

The colour scheme of the scrollbars of a browser window is controlled by the page being displayed. The colour attributes are specified as a style in the <BODY> tag of the page. The following code applies a single colour attribute to the scrollbar:

<body style="scrollbar-base-color:orange">

Multiple attributes should be separated with semi-colons (;) like this:

<body style="scrollbar-base-color:orange; scrollbar-arrow-color:white">

Follow this link to open a file that contains a body style instruction to colour the scrollbar orange, as in the first code example above (it will open in a new window). There is nothing unusual about the hyperlink itself, because the instruction to colour the scrollbar resides within the code of the page itself.

Colouring Inline Frame Scrollbars

Inline frames (also called floating frames) created with the <IFRAME> tag are used to display pages or images in an area within an existing page. You can learn more about inline frames in my Inline Frames Tutorial. Here's an example of an inline frame displaying a page:

This frame is displaying the same page that was opened in the previous example. The body style instruction in the displayed page causes the scrollbar of the inline frame to be coloured. Here is the code used to display that inline frame:

<iframe width="200" height="90" frameborder="0" src="loremorange.htm">
</iframe>

The numbers for width and height refer to pixels. Alternatively, you could use percent (e.g. width=30%). I have also chosen not to display a border. To display a border either omit the frameborder property or set it to your chosen width

Although inline frames can be used to display images, there isn't a way to give the scrollbar colour instruction (unless you display the image on a page) as the <IFRAME> tag doesn't recognise the style property for scrollbar colour.

Colouring Span Scrollbars

The <SPAN> tag is used to define an area of a specific size on the page, inside which you can display an image or some text. One important difference between <IFRAME> and <SPAN> is that any text you display using <SPAN> is on the same page, but <IFRAME> displays a linked file. Here is some text displayed using <SPAN>:

Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Unlike the previous example, in which the scrollbar colour instruction is contained within the displayed file, this time the instruction is contained in a property of the <SPAN> tag itself. Here's the code:

<span style="overflow-Y: auto; scrollbar-base-color: olive; width: 200; 
height: 100">Your text goes here</span>

The <SPAN> tag is more widely supported than <IFRAME> and like <IFRAME> it has the ability to display images. Because the scrollbar colour instruction is contained in a property of the <SPAN> tag, it applies even when a image is displayed:

Here's the code:

<span style="scrollbar-base-color: darkorchid; width: 200; height: 100; 
overflow-Y: auto; overflow-X: auto"><img src="../images/cirque.jpg"></span>

I have deliberately made the area defined by the <SPAN> tag smaller than the dimensions of the image to force the appearance of scrollbars. It is also necessary to specify the overflow properties to prevent the span automatically resizing to fit the image (this isn't usually necessary with text).

Colouring TextArea Scrollbars

Although it can be used like the <SPAN> tag, the <TEXTAREA> tag is more commonly used in web page forms where it provides an area in which the user can enter text. I have entered some default text here so that you can see the scrollbar in action:

<textarea cols="25" rows="5" style="scrollbar-base-color: cadetblue">
Your text goes here</textarea>

Text displayed in the inside the TextArea is normally displayed in the standard monospaced font, although you can add text formatting instructions if required:

<textarea cols="34" rows="6" style="scrollbar-base-color: navajowhite; 
font-family: Verdana,Arial,Helvetica; font-size:98%; line-height: 1.5em">
Your Text Goes Here</textarea>

^ top

Hit Counter