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;
        }
相关文章
|
5月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
10月前
|
前端开发
CSS 滚动条样式修改
CSS 滚动条样式修改
107 0
|
10月前
|
前端开发
|
前端开发
CSS新增样式----圆角边框、盒子阴影、文字阴影
CSS新增样式----圆角边框、盒子阴影、文字阴影
177 0
|
10月前
|
容器
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
92 0
|
4月前
|
前端开发 UED
在响应式布局中,如何避免 overflow 属性法导致的滚动条显示问题?
【10月更文挑战第27天】可以在响应式布局中有效地避免因`overflow`属性法导致的滚动条显示问题,提高页面的布局美观度和用户体验,使页面在不同的设备和屏幕尺寸下都能够呈现出良好的视觉效果和交互性能。
|
10月前
|
前端开发
css 字体渐变样式(设置字体渐变样式+附加实现源码)
css 字体渐变样式(设置字体渐变样式+附加实现源码)
66 0
|
前端开发
CSS:去除input和button边框以及选中时边框默认样式
CSS:去除input和button边框以及选中时边框默认样式
textarea去掉边框和取消选中后的边框
textarea去掉边框和取消选中后的边框
228 0
CSS样式设置颜色
做前端页面必备知识