默认滚动条样式如下：

那如何修改呢？如下代码：

        /*滚动条样式*/
        textarea::-webkit-scrollbar { 
   
            width: 4px;    
        }
        textarea::-webkit-scrollbar-thumb { 
   
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }
        textarea::-webkit-scrollbar-track { 
   
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.1);

        }

textarea为要修改的带有滚动条的元素。

下面就讲解滚动条几个属性，主要有下面7个属性

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

参考

1. css如何修改滚动条样式

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

今天的文章CSS系列之修改滚动条的样式分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。