overflow滚动条样式修改

简介: overflow滚动条样式修改

当div用overflow: scroll;时可以用伪元素::-webkit-scrollbar来设置滚动条样式

/*滚动条*/
        ::-webkit-scrollbar {
            width: 10px; /* 设置滚动条宽度 */
        }
        /*滚动手柄*/
        ::-webkit-scrollbar-thumb {
            height: 30px;
            background-color: #338BD6; /* 滚动条手柄颜色 */
            border-radius: 5px; /* 滚动条手柄边框圆角 */
            /*outline: 2px solid #dcbc6b;*/
            /*outline-offset: -2px;*/
            /*border: 2px solid #b98d8d;*/
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: #338BD6; /* 滚动条手柄hover颜色 */
        }
        /*滚动轨道*/
        ::-webkit-scrollbar-track-piece {
            background-color: #1D3887; /* 滚动条轨道颜色 */
            -webkit-border-radius: 3px;
        }
相关文章
|
前端开发
CSS新增样式----圆角边框、盒子阴影、文字阴影
CSS新增样式----圆角边框、盒子阴影、文字阴影
134 0
|
5月前
|
容器
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
61 0
|
4月前
|
Web App开发 前端开发 JavaScript
如何去掉溢出内容的overflow属性滚动条
如何去掉溢出内容的overflow属性滚动条
203 1
|
5月前
【UI】修改滚动条样式
【UI】修改滚动条样式
40 1
|
10月前
|
前端开发
CSS:去除input和button边框以及选中时边框默认样式
CSS:去除input和button边框以及选中时边框默认样式
|
10月前
自定义scroll滑块样式
自定义scroll滑块样式
61 0
|
11月前
textarea去掉边框和取消选中后的边框
textarea去掉边框和取消选中后的边框
160 0
|
11月前
ucharts修改ToolTip边框阴影文字居中
ucharts修改ToolTip边框阴影文字居中
|
前端开发
修改滚动条样式 #30
修改滚动条样式 #30
84 0
div盒子水平垂直居中以及表格的居中的方法
div盒子水平垂直居中以及表格的居中的方法
143 0