How to Format a Scrollbar in CSS
When your website loads in a Web browser, the browser automatically displays the scrollbar in a particular color such as blue. If you find this shade does not fit the design layout of your site or if you just want to customize your pages, you have the option to format it using Cascading Style Sheets (CSS). With your computer's text editor program, use CSS to style the scrollbar as you prefer.
Other People Are Reading
Instructions
-
-
1
Start your text editor program and open the Web document that has the scrollbar you want to format.
-
2
Type the following CSS code after the opening <head> element:
<style type="text/css">
</style>
-
-
3
Enter "body { }" between the style tags to define a style for the scrollbar on your Web browser. To illustrate:
body { }
The body rule controls the overall appearance of your page.
-
4
Type "scrollbar-base-color: ;" between the curly brackets and follow this with a hexadecimal color value to define the main color of the scrollbar. The complete CSS code looks like the following example:
body { scrollbar-base-color: #606060; }
The CSS rule is automatically applied to the scrollbar that borders a Web browser window when your site is loaded.
-
5
Save your file and preview your work in a browser. Your scrollbar now displays in the assigned shade.
-
1
Tips & Warnings
If you have other HTML elements on your page, such as a table that has a scrollbar, repeat the steps to create a separate rule that formats the bar in this area. For instance:
table { scrollbar-base-color: #cccccc; }
