How to change the default color of the browser scrollbar using CSS
When the webpage content exceeds the height of the browser window, the browser automatically adds a scrollbar to the right side of the page, which you can use to scroll down and view more content.
Also as a web developer, you may create an HTML element such as div with a fixed height to hold some page content. In case, if this content exceeds the set height of the div, a scrollbar will automatically appear on the right side of that div.
In most browsers, the scrollbar will always be grey in color.
Example
If you are the type that likes customizing everything to their look and feel you may want to change the scrollbar color to your preferred one.
You can easily do this with the help of CSS styling.
Before that, let's first look at the structure of a scrollbar with the help of an image.
The scroll-track is the background of the scrollbar, which is generally fixed regardless of the scrolling position.
The scroll-thumb is the moving part of the scrollbar, which usually floats on top of the track.
Styling the browser scrollbar with CSS
We use the scrollbar-color CSS property to set the color of the track and the thumb.
scrollbar-color controls the two colors. The first color of the property sets the color of the scrollbar thumb while the second color sets the color of the scrollbar track.
Syntax
scrollbar-color: thumbcolor trackcolor;
Example
scrollbar-color: purple green;
We use this CSS property within the selector of the element we want the scrollbar styling to apply. We can use the element name such as p, div, iframe, etc. We can as well use the class or Id of the element.
Example
.elementclass{
scrollbar-color: purple green;
}
If we want our scrollbar styling to apply for all scrollbars within the page, we use * as the CSS selector. * stands for everything, so any styling done to it applies to the whole page where applicable.
Example
*{
scrollbar-color: orange green;
}
Full page example
<!DOCTYPE html>
<html>
<head>
<title>Changing Scrollbar color</title>
<style>
* {
scrollbar-color: orange green;
}
.content {
width: 50%;
margin: auto;
display: block;
margin-top: 50px;
background: #eee;
height: 200px;
padding-left: 20px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="content">
<h2>Sample page heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.</p>
<p>Urna neque viverra justo nec ultrices dui sapien eget mi. Elit sed vulputate mi sit. Eget nunc lobortis mattis aliquam. Sociis natoque penatibus et magnis dis.</p>
<p>Blandit aliquam etiam erat velit scelerisque in dictum non. Morbi tincidunt augue interdum velit euismod in. Integer eget aliquet nibh praesent. Leo urna molestie at elementum eu. Nisi scelerisque eu ultrices vitae auctor eu augue.</p>
</div>
</body>
</html>
The above code makes a page that looks like the screenshot below.
Conclusion
When the content on a web page exceeds the height of the browser window or of the HTML element containing it, the browser automatically adds a scrollbar to the page or to that element.
The default color of the scrollbar in most browsers is grey.
For some reason, you may want to customize it and give it different colors that suit your preference. In this article, we have covered everything you need to know in order to change the default scrollbar color using CSS.
