css修改导航条样式

近期由于工作需要要修改table表格导航条样式
本人特整理出相关代码,以及最后效果,供各位小伙伴参考。

具体代码如下:

.xp-table-content ::-webkit-scrollbar {
    
    width:8px;
    height: 8px;
}
.xp-table-content ::-webkit-scrollbar-thumb:horizontal  {
    
    border-radius:10px;
    background:rgba(0,0,0,0.2);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
.xp-table-content ::-webkit-scrollbar-thumb:vertical  {
    
    border-radius:0px;
    background:rgba(0,0,0,0.2);
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}

.xp-table-content ::-webkit-scrollbar-track:vertical{
    
    background:rgba(0,0,0,0.1);
}
.xp-table-content ::-webkit-scrollbar-track:horizontal{
    
    background:#fff;
}

注: xp-table-content类名是给我们自己封装的table的类名。。。如果小伙伴想全局修改导航条可去掉该类名

效果图如下:

css修改导航条样式

转载作品,原作者:,文章来源:https://blog.csdn.net/different9102/article/details/120727197

(0)
打赏 微信赞赏 微信赞赏 支付宝赞赏 支付宝赞赏
上一篇 2021-12-25 09:29
下一篇 2022-01-19 16:00

相关推荐

  • 有趣的css – 简约文字风格导航栏

    利用单选按钮来模拟导航栏点击选中效果,实现一个简约的文字类导航栏。 核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。 导航栏主体结构html代码: css …

    2025-01-22
    1880
  • Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题

    最近写了一个网页,页面很多元素使用的是Fixed定位,当在手机端的Safari浏览器、安卓浏览器等测试时,会出现顶部元素、底部元素 被地址栏、菜单栏或工具栏遮挡的情况。于是,我查阅…

    2024-11-27
    5020
  • 常用的一些CSS代码规则

    常用的一些CSS代码规则:限制视口内的内容宽度、增加正文文本大小、增加文本行之间的间距、限制图片宽度、限制内容中文本的宽度、以更平衡的方式包裹标题、表单控件颜色与页面样式匹配、易于跟随的表格行

    2024-08-08 Html/CSS
    3980
  • CSS适配iOS全面屏底部横条

    CSS适配iOS全面屏底部横条,所有开发者应对资源页面做好不同手机型号的适配效果,不影响用户的正常浏览使用。其中IOS全面屏手机底部横线不可遮挡页面的具体功能和内容。

    2023-12-28
    4010
  • 一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局

    在这篇文章中,我将教你如何使用 CSS Grid(网格) 布局来创建一个超酷的图像网格,它会根据屏幕的宽度改变列的数量,以实现响应式布局。 而这篇文章中最漂亮的部分是:添加一行 C…

    2025-01-23 Html/CSS
    1730
  • 分享几个CSS4操作小技巧,助你代码开挂

    1.::part() 让组件更加灵活 如果你在开发Web组件(Web Components),::part() 让你能直接控制组件的部分元素。它能改变一个封装元素内部的某些样式。 …

    2025-01-17
    2020

发表回复

登录后才能评论
扫码了解
扫码了解
分享本页
返回顶部