How to Change the Scroll Bar Color

One way to add a little pizzaz to your web pages is to change the scroll bar color. This can be done by embedding some simple style sheet code into the HTML <head> section.

Instructions

    • 1

      Open the HTML file in a plain text editor, such as Windows' Notepad program.

    • 2

      Copy and paste the following code into the <head> section of your HTML:
      <style>
      BODY {
      SCROLLBAR-FACE-COLOR: #COLOR;
      SCROLLBAR-HIGHLIGHT-COLOR: #COLOR;
      SCROLLBAR-SHADOW-COLOR: #COLOR;
      SCROLLBAR-3DLIGHT-COLOR: #COLOR;
      SCROLLBAR-ARROW-COLOR: #COLOR;
      SCROLLBAR-TRACK-COLOR: #COLOR;
      SCROLLBAR-DARKSHADOW-COLOR: #COLOR;
      }
      </style>

    • 3

      Replace "COLOR" with the hexadecimal notation for the color you wish to use for that area of the scroll bar. A link to a hexadecimal color chart can be found in the "Resources" section of this article.

    • 4

      Save the changes you have made to your HTML file, and open the file in a web browser to view the changes.

Tips & Warnings

  • An online tool you can use to adjust and preview the scroll bar colors is found below in the "Resources" section. The tool will even generate the code that you copy and paste into your web page.

Related Searches:

References

Resources

Comments

You May Also Like

Related Ads

Featured