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.

Firefox Browser

Firefox provides a different approach to modifying the scrollbar. Firefox does not support the ::webkit-scrollbar pseudo-element or its derivatives, but it provides some customization using CSS’s scrollbar-color and scrollbar-width properties that can modify the site elements’ scrollbars but not the main scrollbar of the site.

You can define the scrollbar width in Firefox using the scrollbar-width property. It accepts the following values:

• auto (default): the width is set automatically based on browser 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 as follows:

.scrollbar-element {
    scrollbar-width: thin;
}Copy code

You can set the scrollbar color in Firefox using the scrollbar-color property. This feature takes two color values: the first defines the color of the scrollbar thumb, and the second defines the color of the scrollbar track.

For example, if you want to set an orange scrollbar thumb and a light gray track, you can do it as follows:

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