css to modify the scroll bar style (with notes)

/* scroll bar style */

#signBox .layui-tab-content::-webkit-scrollbar {/*Scroll bar overall style*/

    width: 10px; /*The height and width correspond to the size of the horizontal and vertical scroll bars*/

    height: 1px;

}

#signBox .layui-tab-content::-webkit-scrollbar-thumb {/*Small square inside the scrollbar*/

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

    background: #0E609F;

}

#signBox .layui-tab-content::-webkit-scrollbar-track {/*track inside the scrollbar*/

    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

    border-radius: 10px;

    background: #0E4682;

}

The style is as follows:

 

::-webkit-scrollbar The overall part of the scroll bar, you can set the width of the
::-webkit-scrollbar-button The buttons at both ends of the scroll bar
::-webkit-scrollbar-track Outer track
::-webkit-scrollbar-track-piece Inner scrolling groove
::-webkit-scrollbar-thumb Scrolling slider
::-webkit-scrollbar-corner Corner
::-webkit-resizer Define the style of the drag block in the lower right corner

The road is long and long, I will search up and down!

Guess you like

Origin blog.csdn.net/weixin_38817361/article/details/126408869