How to set the color of the scroll bar with CSS?

When browsing the webpage, we can sometimes see that the color of the webpage scroll bar is not the default style of the system, but a beautiful red or other color style. In fact, this is implemented by adding code between the webpage code, what code is specific?
The code of the page scroll bar and its explanation are as follows:
Scrollbar-3d-light-color set or retrieve the highlighted border color of the scroll bar
Scrollbar-highlight-color to set or retrieve the ThreedHighlight color of the 3D interface of the scroll bar
Scrollbar-face-color set or retrieve the color of the 3D surface (ThreedFace) of the scroll bar
Scrollbar-arrow-color to set or retrieve the color of the arrow in the scroll bar direction
Scrollbar-shadow-color to set or retrieve the ThreedShadow color of the 3D interface of the scroll bar
Scrollbar-dark-shadow-color to set or retrieve the ThreedDarkShadow color
Scrollbar-base-color to set or retrieve the base color of the scroll bar. Other UI colors will be automatically adjusted accordingly
For details about the parameters and meanings of the CSS Scrollbar attribute, refer to here.

Please note that in actual use, some friends define the color of the scroll bar in CSS, which is unavailable during testing. What is the reason?
Pay attention to defining the CSS code selector for the color of the scroll bar! In previous tutorials, the selection operator is defined as the Body to change the color of the scroll bar. Now it is best to change the selection character to html! As shown in the preceding example.

Write an instance demo (please watch it in the webkit browser. CSS is also very simple.

The code is as follows:

Copy code

Copytext /* Set the scroll bar style */ :-Webkit-scrollbar { Width: 12px; } /* Scroll slot */ :-Webkit-scrollbar-track { -Webkit-box-shadow: inset 0 0 6px rgba (0.3, 0 ); Border-radius: 10px; } /* Scroll bar slider */ :-Webkit-scrollbar-thumb { Border-radius: 10px; Background: rgba (0.1, 0 ); -Webkit-box-shadow: inset 0 0 6px rgba (0.5, 0 ); } :-Webkit-scrollbar-thumb: window-inactive { Background: rgba (0.4, 0 ); }

When you use it, you only need to change the color value by referring to the above code. The color code behind # is hexadecimal.