How to set the scroll bar color in CSS

This article mainly introduces "how to set scroll bar color in CSS". In daily operation, I believe many people have doubts about how to set scroll bar color in CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to set scroll bar color in CSS". Next, please follow the editor to study!

CSS sets scroll bar color

When browsing the web, we can sometimes see that the color of the web scroll bar is not the default style of the system, but a beautiful red or other color style. in fact, this is achieved by adding code between the page code. what is the specific code?

The page scroll bar code and its interpretation are as follows:

Scrollbar-3d-light-color sets or retrieves the bright border color of the scroll bar

Scrollbar-highlight-color sets or retrieves the bright edge (ThreedHighlight) color of the scroll bar 3D interface

Scrollbar-face-color sets or retrieves the color of the 3D surface (ThreedFace) of the scroll bar

Scrollbar-arrow-color sets or retrieves the color of the scroll bar direction arrow

Scrollbar-shadow-color sets or retrieves the dark edge (ThreedShadow) color of the scroll bar 3D interface

Scrollbar-dark-shadow-color sets or retrieves the scroll bar dark border (ThreedDarkShadow) color

Scrollbar-base-color sets or retrieves the base color of the scroll bar. Other interface colors will be automatically adjusted accordingly.

Let's take a look at the following example of CSS setting the color of the scroll bar:

SourceCodetoRun

How to use CSS to set scroll bar color www.mb5u.com # height {height:1000px;} html {scrollbar-face-color:#C00; scrollbar-highlight-color:#F60; scrollbar-3dlight-color:#F00; scrollbar-darkshadow-color:#000; scrollbar-Shadow-color:#000; scrollbar-arrow-color:#FFF; scrollbar-track-color:#D6A27E;}

[you can modify part of the code before running to view the effect]

◆ some friends in the actual use, CSS defines the scroll bar color, but the test found that it did not work. What is the reason for this?

Please pay attention to the selector that defines the scroll bar color CSS code! In previous tutorials, the selector was defined as Body to achieve the effect of changing the color of the scroll bar. Now * changes the selector to html! As shown in the example above.

When you use it, refer to the above code and just change the color value. Everything after the # is a color code, and the color code is hexadecimal.

At this point, the study on "how to set the color of the scroll bar in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!