首页前端开发CSScss怎么修改滚动条的样式

css怎么修改滚动条的样式

时间2024-01-28 00:58:03发布访客分类CSS浏览972
导读:收集整理的这篇文章主要介绍了css怎么修改滚动条的样式,觉得挺不错的,现在分享给大家,也给大家做个参考。在CSS中,可以通使用scrollbar-face-color、scrollbar-arrow-color等属性和“::-webkit-...
收集整理的这篇文章主要介绍了css怎么修改滚动条的样式,觉得挺不错的,现在分享给大家,也给大家做个参考。

在CSS中,可以通使用scrollbar-face-color、scrollbar-arrow-color等属性和“::-webkit-scrollbar”、“::-webkIT-scrollbar-thumb”等选择器来修改滚动条的样式。

本教程操作环境:windows7系统、CSS3& & HTML5版、Dell G3电脑。

CSS设置代码:

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

此设置对所有滚动条都有作用。

为了兼容其他浏览器还需要做一些功夫。这里针对webkit浏览器做一些设置。同样我们还是有必要先了解其属性:

::-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 :两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)

使用伪元素设置CSS。

继续添加以下代码

::-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;
}
    

再次测试输出,现在IE和谷哥类浏览器都能看到变化了。

(学习视频分享:css视频教程)

以上就是css怎么修改滚动条的样式的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: css3动画如何停止下一篇:如何判断浏览器是否支持css3猜你在找的CSS相关文章 css怎么控制按钮不可用2022-05-17css3中transform属性实现的4种功能2022-04-13纯CSS3实现div按照顺序出入效果2022-04-13CSS实现隐藏搜索框功能(动画正反向序列)2022-04-13使用CSS3实现按钮悬停闪烁动态特效代码2022-04-13CSS3 Tab动画实例之背景切换动态效果2022-04-13CSS实现两列布局的N种方法2022-04-13CSS 实现Chrome标签栏的技巧2022-04-13css实现两栏布局左侧固定宽右侧自适应的多种方法2022-04-13从QQtabBar看css命名规范BEM的详细介绍2022-04-13 其他相关热搜词更多phpjavapython程序员

若转载请注明出处: css怎么修改滚动条的样式
本文地址: https://pptw.com/jishu/588950.html
css预处理器是什么 css使得文本框不可选中

游客 回复需填写必要信息