Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions Tools to help you create your site Free and shareware fonts to download Photographs to use in your projects Shop for your site needs Free Online classes REcommend this site to others Developingwebs Log Out Change My Account details and preferences
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

9 Coloring Scrollbars

1  2  3  4  5  6  7  8  9  10

Scroll bars colors are a style and can be placed at the head of a page or in a style sheet. The scroll bar has several areas to color indicated by the list below.
  1. scrollbar-3dlight-color
  2. scrollbar-darkshadow-color
  3. scrollbar-base-color
  4. scrollbar-highlight-color
  5. scrollbar-track-color:
  6. scrollbar-arrow-color
  7. scrollbar-face-color
  8. scrollbar-shadow-color

On your external style sheet you select the element you want to color the scrollbar on such as body{} or iframe{} or textarea{}.

Then you can list the scrollbar properties you want to color between the brackets {}. Follow each scrollbar property with a colon: and add your hex value or valid color name followed by the semicolon;.

The css for the scrollbar on the right looks like this:

body {
scrollbar-3dlight-color: #CCCC99;
scrollbar-arrow-color:#CCCC99;
scrollbar-base-color: #CCCC99;
scrollbar-darkshadow-color: #666633;
scrollbar-face-color:#CCCC99;
scrollbar-highlight-color:#CCCC99;
scrollbar-shadow-color: #666633;
scrollbar-track-color: #999966;
}

Below is a scroll bar generator for you to create scrollbar styles for your site for the head of your document. You can also use this code, edited for an external sheet to do the same.

 



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2014 All Rights Reserved
Privacy and Legal




iSECURE Network Security