Login

E-mail: Password: Remember me Retrieve your password

Useful links

More Useful Links

imagination

View Profile
View Blog
View friends
Testimonials
Books
Comments
Answers
Career
Calendar
Interaction

send message

friend request

add to watch list

Full name:	imagination
Sex:	Not specified
Age:	-3
Ethnicity:	I will tell you later
Education:	I will tell you later
Country:	India

RSS feed

Search by Keyword: Posts per page:
Additional filtering options >>>

Topic:
Privacy level:
Type:
Priority:
Intensity:
Frequency:

Last modified:2008-08-29 05:12:30

Created on:2008-08-29 05:12:30

Views:13, Comments:0

It's true! You really can color your scrollbars and have a change of scenery from the basic gray or other browser default scrollbar colors. It just takes a few snippets of CSS markup to create colored scrollbars with CSS, which you'll learn how to do in this tutorial.

Note: To see the results, you'll need to view your page with Internet Explorer 5.5+, too. (Most other browsers use the browser default and do NOT support scrollbar colors - see the Imagination Web Design section below.)

You can also color the scrollbar of a form's textarea field, Imagination Web Design. I used a variety of bright colors to show some of the scrollbar property attribute colors that are possible to change.

Example 1
This is text inside a textarea element. You can change the colors of the scrollbars with CSS using the scrollbar property. Scrollbar colors show up in Internet Explorer 5.5+. Other browsers will see the default gray scrollbars.

If you don't see a colorful scrollbar above, here are some screen shots. (A separate popup window will open.)

This tutorial is geared for those with a knowledge of basic HTML markup, including forms, and a beginning to intermediate level knowledge of CSS.

On this page:

Here are the Style Rules
Browser Scrollbar
Forms Scrollbar
- Fast, One Color Route
- Still Fast, but More Colors Route
But What Does All This Markup Mean?
Play and Explore
Further Information
- Information, FAQ About the CSS Scrollbar Property as Microsoft “Extensions” (Questions and Answers about which browsers support the scrollbar property)

Here are the Style Rules

Now we're ready to learn how to add the scrollbar property rules for the browser scrollbar or the textarea form field scrollbar.

As shown below:

For the browser scrollbar colors, add the scrollbar property attribute rules to the body element.
For the textarea scrollbars, add the scrollbar property attribute rules to the textarea element.

As you know if you've used CSS:

The style element tag goes between the head element tags near the top of your HTML markup as shown in the examples throughout this tutorial, or
For an external style sheet, just add the rules to your style sheet. Here's a sample. (A separate popup window will open.)

Tip:

Wondering what colors to use? Need to know corresponding HTML color codes? Visit WebsiteTips.com's Web Site Resources Color Color Tools Section for:

WebsiteTips.com's free online or printable color charts and elsewhere
WebsiteTips.com's free online color scheme tools, including our
- Color Blender Color Scheme Tool (choose 2 colors, tool generates 1-10 shades between them)
- Colormatch Remix Color Scheme Tool (choose schemes with 9 harmonious colors)
- Colour Scheme Chooser (monochromatic, analogic, complimentary, split complementary, triadic, and double contrast colour schemes)

In addition, our Color Resources section also has annotated links to great tutorials all about color, books on color, color management, and hardware and software to calibrate and manage colors.

Editor note February 2006: Note that not everyone considers colored scrollbars a good thing, and you should also be sure the colors you choose aren't a problem for those with color deficiencies or vision impairments. Before altering scrollbar colors, make sure they won't be a problem to use by anyone and that they will be well received by your visitors! See the following:

Un-colored Scrollbars (W3C)
Scrolling and Scrollbars (456 Berea Street)

top ‘On this page’ menu

Browser Scrollbar Browser Scrollbar: Fast, One Color Route

If you wish to go the fast and simple route, you can add just the scrollbar-base-color attribute to your CSS style rules rather than all of them as shown below. The scrollbar-base-color attribute is a composite attribute (which means it can encompass the other scrollbar property attributes.)

For example, if you wish to have a shade of blue for your scrollbar, Imagination Web Design you could just add this to your body element rules, as highlighted below:

<html> <head>

<style type="text/css">

body {scrollbar-base-color:#369;}

</style>

</head>

All the scrollbar colors will use a shade of blue, as shown in the screen shot below:

Example 2 (screen shot)

You can also view a sample page. (A separate popup window will open with a sample.)

Browser Scrollbar: Still Fast, but More Colors Route

For more detail to the browser's scrollbar colors, add the scrollbar property style rules to the body element, as highlighted below: (These are the style rules for Example 1 above.)

<html> <head>

<style type="text/css">

body {scrollbar-3dlight-color:#ffd700; scrollbar-arrow-color:#ff0; scrollbar-base-color:#ff6347; scrollbar-darkshadow-color:#ffa500; scrollbar-face-color:#008080; scrollbar-highlight-color:#ff69b4; scrollbar-shadow-color:#f0f}

</style>

</head>

As you can see in the above markup, there are several scrollbar property attributes for which you can designate a color. Change any of the color properties to blend with your particular Web page needs.

The screen shot to the left is a magnification of the colored scrollbar for easier viewing of each of the scrollbar property attributes.

If you do not include a scrollbar property attribute, it will revert to that attribute's default color.

IMPORTANT NOTE:
NONE of the images, content, or other materials at websitetips.com, including this one, are available for you to steal and place on your own Web sites. You are, however, welcome to create a link to this tutorial for others to visit.

For example: Coloring Your Scrollbars with CSS by Shirley Kaiser for WebsiteTips.com -

use the following HTML markup:

<a href="http://websitetips.com/articles/css/scrollbars/">Coloring Your Scrollbars with CSS</a> by Shirley Kaiser for <a href="http://websitetips.com/">WebsiteTips.com</a>.

See this Web site's Copyright Information page for more information.

Now, let's get on with the rest of the tutorial...

top ‘On this page’ menu

Scrollbar Track Color

In the above examples, the scrollbar track gives a checkered appearance. If you'd like to have a solid color instead, as shown in the samples in example 3a through 3d below, Terence Curtis of tfcDESIGN let me know Imagination Web Design of the scrollbar-track-color attribute.

Example 3a: Without a Scrollbar Trackcolor Attribute
This is text inside a textarea element. You can change the colors of the scrollbars with CSS using the scrollbar property. Scrollbar colors show up in Internet Explorer 5.5. Other browsers will see the default gray scrollbars.

Example 3b: With a Scrollbar Trackcolor Attribute
This is text inside a textarea element. You can change the colors of the scrollbars with CSS using the scrollbar property. Scrollbar colors show up in Internet Explorer 5.5. Other browsers will see the default gray scrollbars.

The scrollbar-track-color attribute is the last attribute in the list below, highlighted:

<html> <head>

<style type="text/css">

.scrollbar2 { scrollbar-3dlight-color:#ffd700; scrollbar-arrow-color:#ff0; scrollbar-base-color:#ff6347; scrollbar-darkshadow-color:#ffa500; scrollbar-face-color:#008080; scrollbar-highlight-color:#ff69b4; scrollbar-shadow-color:#f0f;scrollbar-track-color:#800080;
} </head>

And a couple more samples:

Example 3c: Without a Scrollbar Trackcolor Attribute
This is text inside a textarea element. You can change the colors of the scrollbars with CSS using the scrollbar property. Scrollbar colors show up in Internet Explorer 5.5. Other browsers will see the default gray scrollbars.

Example 3d: With Scrollbar Trackcolor Attribute
This is text inside a textarea element. You can change the colors of the scrollbars with CSS using the scrollbar property. Scrollbar colors show up in Internet Explorer 5.5. Other browsers will see the default gray scrollbars.

At the time this tutorial was written, the scrollbar-track-color attribute is not documented on Microsoft's CSS attributes page with the other scrollbar attributes, but I did find it among the textarea documentation and a page on the scrollbar trackcolor attribute.

top ‘On this page’ menu

Forms Scrollbar Forms Scrollbar: Fast, One Color Route

If you wish to go the fast and simple route, your can add just the scrollbar-base-color attribute to your CSS style rules rather than adding all of them, as shown below.

Add a textarea element rule to your CSS using the scrollbar-base-color attribute, the same scrollbar property attribute that you used above for the browser scrollbars.

For example, if you wish to have a shade of blue for your scrollbar, you could just add Imagination Web Design this rule to your textarea element, as highlighted below:

<html> <head>

<style type="text/css">

textarea {scrollbar-base-color: #369;}

</style>

</head>

top ‘On this page’ menu

Forms Scrollbar: Still Fast, but More Colors Route

More colors are handled the same way as the one color route above, this time noting the scrollbar attributes within your style rules for the textarea element. The only difference with adding more colors is that you'll add more of the scrollbar attributes and corresponding property colors.

Add a textarea element rule to your CSS, as highlighted below, using the same scrollbar properties that you used above for the browser scrollbars, as highlighted below.

<html> <head>

<style type="text/css">

textarea {scrollbar-3dlight-color:#ffd700; scrollbar-arrow-color:#ff0; scrollbar-base-color:#ff6347; scrollbar-darkshadow-color:#ffa500; scrollbar-face-color:#008080; scrollbar-highlight-color:#ff69b4; scrollbar-shadow-color:#f0f}

</style> </head>

top ‘On this page’ menu

But What Does All This Markup Mean?

I know that some of you want to just snatch the markup and run, but there are more details, if you'd like to dig in more.

Some of the scrollbar attributes are self-descriptive, such as 'scrollbar-arrow-color' referring to the color of the scrollbar arrow. For detailed definitions of each CSS scrollbar attribute, refer to MSDN's CSS Attribute Reference.

As mentioned above, the CSS scrollbar elements are proprietary markup for Internet Explorer 5.5+. Netscape and most other browsers will continue to see the default colors. See the More Information section below for the Q&A about this.

top ‘On this page’ menu

Play and Explore

An easy way to see which attribute impacts a specific part of a scrollbar is to play with a great tool provided by Microsoft to generate markup for your own scrollbar colors. While the colors are limited, there is still plenty of room for playing and exploring possibilities.

Microsoft's Scrollbar Colors Code Generator

Have fun exploring! When you're ready to implement this CSS into your pages, keep users in mind and be mindful of using good colors that aren't confusing, especially since colored scrollbars are a newer feature.

top ‘On this page’ menu

Further Information

CSS Tutorials, Books, Resources section at WebsiteTips.com
Color Tutorials, Books, Resources section at WebsiteTips.com
- Tutorials on Color
- Color Tools (color charts, color scheme tools, much more)
- Books on Color
MS: Generate Scrollbar Colors Markup
Try out color combinations here, markup is generated, and you can copy/paste the markup!
MSDN's CSS Attribute Reference
Explore what all the CSS attributes are, what they mean, and view samples.
What's New In Internet Explorer 5.5
Listing of all the new tags and scripts added for IE5.5.

Information, FAQ About the CSS Scrollbar Property as Microsoft “Extensions”

Microsoft's CSS Attribute Reference chart states that the scrollbar property attributes are “available as of Internet Explorer 5.5.” These have NOT yet been proposed for W3C Recommendations, thus marked at Microsoft's site as an “extension.”

What does that mean? Internet Explorer 5.5+ will recognize the scrollbar property and its attributes, while Netscape and most other browsers will use the browser default. This is also referred to as “proprietary” 1 markup.If you validate your CSS markup through W3C's CSS Validator, you will get an error message that the property doesn't exist. This is because it's not yet supported via W3C recommendations.Does that matter? Those who wish to avoid proprietary markup may prefer not to use this markup. Will these tags cause problems for other browsers? No. Other browsers will just skip these tags and use their usual default. If colored scrollbars will show up to viewers using Internet Explorer 5.5+ but not most other browsers, should I even bother using them? That's an individual decision often based on your stat logs and percentage of users to your site that use Internet Explorer 5.5+, personal views about using proprietary tags, or desires to use only W3C Recommended markup.

View Comment

No friends yet

No testimonials yet

Only imagination’s friends can post testimonials.

No comments yet

Only imagination’s friends can post comments.

No book created so far.

Filter By Question Type:

No questions posted

Calendar

There are no events yet

Select year:

January 2009
Sun	Mon	Tue	Wed	Thu	Fri	Sat
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

February 2009
Sun	Mon	Tue	Wed	Thu	Fri	Sat
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

March 2009
Sun	Mon	Tue	Wed	Thu	Fri	Sat
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

April 2009
Sun	Mon	Tue	Wed	Thu	Fri	Sat
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

May 2009
Sun	Mon	Tue	Wed	Thu	Fri	Sat
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

June 2009
Sun	Mon	Tue	Wed	Thu	Fri	Sat
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

July 2009
Sun	Mon	Tue	Wed	Thu	Fri	Sat
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

August 2009
Sun	Mon	Tue	Wed	Thu	Fri	Sat
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

September 2009
Sun	Mon	Tue	Wed	Thu	Fri	Sat
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

October 2009
Sun	Mon	Tue	Wed	Thu	Fri	Sat
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

November 2009
Sun	Mon	Tue	Wed	Thu	Fri	Sat
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

December 2009
Sun	Mon	Tue	Wed	Thu	Fri	Sat
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

12am
1am
2am
3am
4am
5am
6am
7am
8am
9am
10am
11am
12pm
1pm
2pm
3pm
4pm
5pm
6pm
7pm
8pm
9pm
10pm
11pm

Commented Posts
Groups
Discussions

Most viewed post

Author:gelwithus

Posted on:2006-07-11 04:07:51 GMT

Wealth And Wellnes and having it all whilst spending more time with your loved ones at home. Launching now 20th July in Europe (Amsterdam) is Agel. As Independent Team M

Most commented on post

Author:gelwithus

Posted on:2006-07-11 04:07:51 GMT

Wealth And Wellnes and having it all whilst spending more time with your loved ones at home. Launching now 20th July in Europe (Amsterdam) is Agel. As Independent Team M

Random post

Author:remotecontrol7

Posted on:2008-10-06 21:44:35 GMT

Radio Controlled and Remote Controlled toys. Radio Controlled Helicopters, RC Helicopters, RC Planes, RC Cars. Flying Hippy Offers a range of Radio Controlled Toys. We sp

Newest post

Author:lftconvers65

Posted on:2009-01-09 04:35:00 GMT

Our Allkare Building Contractors provide a full property repair services like a lofts,loft insulation,loft windows,velux windows,rafter,loft,velux,loft conversion,loft co

made by iSturm.com