Change default browser scrollbar color and style in CSS

Hey Folks,
I am up with another tutorial of CSS. In this tutorial, we will learn how to change the color and style of the browser scrollbar using pure CSS.

So let’s start with our tutorial. By changing the color of our scrollbar we can make our website more attractive. We can customize our scrollbar the way we want. We can also change the width, height, background color, shade of the scrollbar.

CSS Code to change the color of the default browser scrollbar

Below is the simple CSS code to change the style of our scrollbar:

::-webkit-scrollbar{
  width:8px;
}
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background-color: #2196F3;
  box-shadow: inset 0 0 6px rgba(0,0,0,.5);
}
::-webkit-scrollbar-track{
  border-radius: 10px;
  background-color: #d5f7f7;
  box-shadow: inset 0 0 6px rgba(0,0,0,.4);
}

Now you can run the above CSS code on a webkit supported browser. You can see that the default color and a few styles of the browser scrollbar has been changed.

In our above code, we have used CSS scrollbar selector. But these selectors only works for WebKit supported browsers. For example, it can work on Google Chrome, Safari, iOS browser, Iris Browser, etc.

Also, read:

 

Below are the scrollbar selectors that we have used and how it works:

  • ::-webkit-scrollbar – It represents the whole scrollbar.
  • ::-webkit-scrollbar-thumb – The draggable element that we use to handle the scrolling of the web page.
  • ::-webkit-scrollbar-track – It represents the progress bar of the WebKit browsers.

These are called pseudo-elements. Well, there are few more pseudo-elements available to work with the browser scrollbar. Here in this article, we have used three of these. You can know about other pseudo-elements for the scrollbar on https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar.

 

Leave a Reply

Your email address will not be published. Required fields are marked *