How to Edit Scrollbar Color and Style?

How to Modify Scrollbar with Using CSS

CSS is a language used to define the appearance and design of web pages. Modifying the style of the scrollbar with CSS is done using pseudo-elements.

These pseudo-elements work in most modern browsers, such as Chrome, Edge, and Safari, but not in Firefox.

Step 1: Select the Part of the Scrollbar

First, you need to decide which part of the scrollbar you want to modify. You can define the CSS styles for the following parts:

• ::webkit-scrollbar: The scrollbar.
• ::webkit-scrollbar-button: The scrollbar buttons (up and down).
• ::webkit-scrollbar-thumb: The scrollbar thumb.
• ::webkit-scrollbar-track: The track of the scrollbar, where the thumb moves.
• ::webkit-scrollbar-corner: The corner where the horizontal and vertical scrollbars meet.

Step 2: Define Scrollbar Style Rules

Next, you can define style rules for the selected part.

Scrollbar Width

If you want to change the entire scrollbar’s width you can do it as follows:

::webkit-scrollbar {
    width: 10px;
}Copy code

In this example, the scrollbar is now 10 pixels wide.

Scrollbar Background Color

If you want to change scrollbar colors you can do it as follows:

::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}
::webkit-scrollbar-thumb {
    background-color: #F90;
}
::webkit-scrollbar-thumb:hover {
    background-color: #AA00FF;
}Copy code

In this example, the background color of the scrollbar track is light gray and the thumb’s background is orange (#F90). When the cursor is hovered over the thumb its color changes to purple (#AA00FF).

Scrollbar Thumb Border Radius

If you want to change the roundness of scrollbar corners, you can use border-radius CSS property:

::webkit-scrollbar-thumb {
    border-radius: 5px;
}Copy code

In this example, the thumb’s border radius is 5 pixels.

Step 3: Scrollbar Styles for Specific Elements

Pseudo-elements can be used without an attached CSS class, which will affect all scrollbars on the site.

By adding a CSS class, you can limit styles to specific elements in this way:

.my-specific-elements::webkit-scrollbar {
    width: 10px;
}
.my-specific-elements::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}
.my-specific-elements::webkit-scrollbar-thumb {
    background-color: #F90;
    border-radius: 5px;
}
.my-specific-elements::webkit-scrollbar-thumb:hover {
    background-color: #AA00FF;
}Copy code

Step 4: Add Styles to Your Website

You can add the scrollbar CSS style in the WordPress Customizer ➞ Custom CSS section or, for example, by writing in CSS files of your child theme.

Changing the Default Scrollbar Colors and Width

You can define the scrollbar color using the scrollbar-color property. This property takes two color values: the first sets the color of the draggable part of the scrollbar (the thumb), and the second sets the color of the scrollbar track.

For example, if you want to set the draggable part to orange and the track to light gray, you can do it like this:

* {
    scrollbar-color: #F90 #F5F5F5;
}Copy code

You can set the width to one of the following values:

• auto (default): The width is automatically determined based on the browser’s settings.
• thin: A thinner scrollbar than “auto”.
• none: The scrollbar is completely hidden, but scrolling is still possible.

For example, if you want to set a thinner scrollbar, you can do it like this:

* {
    scrollbar-width: thin;
}Copy code

scrollbar-color ja scrollbar-width work on Chrome, Brave and Firefox.