WebDevelopersNotes logo

home-icon Home / HTML / Scrollbar colors – Changing the scrollbar using HTML color codes

Scrollbar colors – Changing the scrollbar using HTML color codes

Scrollbar colors - Changing the scrollbar using HTML color codes

Let us look at the magnified image of the scrollbar that we saw on the previous page again.

Scrollbar magnified

You will note that both the slider and the scroll arrow boxes display the scrollbar highlight, 3dlight, darkshadow, shadow and face colors.

Now that you know the different css properties to which you can attach html color codes, you will be able to create great looking scrollbars in no time. We will now look at some examples.

Sponsored Links

A nice green colored scrollbar without the 3D effect – Click to view the scrollbar – opens in a new window.

html {scrollbar-face-color: #8AB200;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color:#53670D;
scrollbar-darkshadow-color: #53670D;
scrollbar-track-color: #D4E597;
scrollbar-arrow-color: #53670D;}

A pink scrollbar with soft edges – Click to view the scrollbar – opens in a new window.

html {scrollbar-face-color: #FFE3FF;
scrollbar-shadow-color: #FE81FF;
scrollbar-highlight-color: #FE81FF;
scrollbar-3dlight-color:#CE0075;
scrollbar-darkshadow-color: #CE0075;
scrollbar-track-color: #FFC0C0;
scrollbar-arrow-color: #CE0075;}

A brown colored scrollbar with 3D effect and light from a different angle – Click to view the scrollbar – opens in a new window.

html {scrollbar-face-color: #CE7E00;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #6F4709;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color: #6F4709;
scrollbar-track-color: #FFE8C1;
scrollbar-arrow-color: #6F4709;}

A thin scrollbar – Click to view the scrollbar – opens in a new window.

html {scrollbar-face-color: #367CD2;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;}

If you look at the HTML/CSS codes for the scrollbars in the examples above, you will understand that different types of scrollbars can be created using HTML color codes and color names. Scroll bars can not only be changed for the main scrollbars of a web page but the HTML color codes can also be used to change scrollbar colors for HTML textarea elements.

Can I use HTML color names instead of hexadecimal color codes?

Yes, absolutely! You can use whichever form you feel comfortable with. You can also refer Colors in HTML – web page color codes and names. Some related articles that can help you understand colors on the web:

Now that we know how to manipulate scrollbars on web pages using HTML color codes, let us see how we can create a transparent scrollbar with this knowledge.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Caps Lock jokes and funny images

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

At one time, Coca-Cola had an online music store - myCokeMusic.com. It ceased operation on 31st July 2006. Even though they had myCokeMusic.com music store, Coca-Cola still did a promotion that involved Apple iTunes. In July 2005, a free iTunes song was given away with every 32 US fl oz Slurpee bought from 7-Eleven. [more...]