How to modify the scroll bar style with css

In CSS, you can use scrollbar-face-color, scrollbar-arrow-color and other attributes and selectors such as "::-webkit-scrollbar" and "::-webkit-scrollbar-thumb". Modify the style of the scroll bar.

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

CSS setting code:

*{
scrollbar-face-color:#fff;/*滑块颜色*/ 
  scrollbar-arrow-color:#000; /*箭头颜色*/
  scrollbar-shadow-color:#000000; /*滑块边线颜色*/
  scrollbar-track-color:#dde3fa; /*滑轨颜色*/
}

This setting has an effect on all scroll bars.

Still needs some work to be compatible with other browsers. Here are some settings for webkit browsers. Similarly, we still need to understand its properties first:

::-webkit-scrollbar{}/*整体设置*/
::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track ：外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track-piece ：内层轨道，具体区别看下面gif图，需要注意的就是它会覆盖第三个属性的样式。
::-webkit-scrollbar-thumb ：滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner ：边角，两个滚动条交汇处
::-webkit-resizer ：两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）

Use pseudo elements to set CSS.

Continue to add the following code

::-webkit-scrollbar{background-color: #000}
::-webkit-scrollbar-track {
background-color: #7dc2f6;
} 
::-webkit-scrollbar-thumb {
background-color: #1b99f7;
} 
::-webkit-scrollbar-button {
background-color: #b9e0fd;
} 
::-webkit-scrollbar-corner {
background-color: #018ef8;
}

Test the output again. Now both IE and Google browsers can see the changes.

(Learning video sharing: css video tutorial)

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