How to modify scroll bar arrow style with css

In css, you can set the scroll bar arrow style through the "::-webkit-scrollbar" pseudo-class selector, the syntax "::-webkit-scrollbar-button{property:property value;}"; the The selector sets the buttons at both ends of the scroll bar track, allowing the position of the small square to be fine-tuned by clicking on it.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

::-webkit-scrollbar CSS pseudo-class selector affects the style of an element's scroll bar. It can only be used in browsers that support WebKit (for example, Google Chrome, Apple Safari).

Modifiable scroll bar css:

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

Example: For a div with class="left-nav", modify the scroll bar arrow style

::-webkit-scrollbar-button {
    display: block; 
} 
::-webkit-scrollbar-button:horizontal:single-button:start {
    width: 24px;  
    background: url("../img/scroll_btn.png") 0 -52px no-repeat;
    cursor: pointer;
}
::-webkit-scrollbar-button:horizontal:single-button:end {
    width: 24px;    
    background: url("../img/scroll_btn.png") 0 -77px no-repeat;    
    cursor: pointer;
}
::-webkit-scrollbar-button:vertical:single-button:start {
    width: 16px;    
    background: url("../img/scroll_btn.png") -3px 0px no-repeat;    
    cursor: pointer;
}
::-webkit-scrollbar-button:vertical:single-button:end {
    width: 16px;    
    background: url("../img/scroll_btn.png") -3px -26px no-repeat;    
    cursor: pointer;
}

Recommended learning: css video tutorial

The above is the detailed content of How to modify scroll bar arrow style with css. For more information, please follow other related articles on the PHP Chinese website!