纯CSS修改浏览器的默认滚动条样式

一方面利益于CSS强大的功能，一方面利益于浏览器日益强大的解析能力和开放的心态，webkit内核的浏览器允许网页中的JS代码改变滚动条的样式。代码如下：

::-webkit-scrollbar-track-piece {background-color:#f5f5f5;border-left:1px solid #d2d2d2;
}
::-webkit-scrollbar {width:13px;height:13px;
}
::-webkit-scrollbar-thumb {background-color:#c2c2c2;background-clip:padding-box;border:1px solid #979797;min-height:28px;
}
::-webkit-scrollbar-thumb:hover {border:1px solid #636363;background-color:#929292;
}

可以根据需要调整以上代码的数值。具体的说明网上一大堆，在此不赘。

纯CSS修改浏览器的默认滚动条样式相关推荐

如何修改浏览器的默认滚动条样式
如何修改浏览器的默认滚动条样式 /* 浏览器滚动条样式 *//* width */ ::-webkit-scrollbar {width: 4px;height: 4px; }/* Track */ ...
checkbox 选中_纯CSS修改checkbox复选框样式
效果图: 移入:
css 默认显示滚动条,css控制默认滚动条样式
针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...
html5的修改滚动条滑块样式,前端项目修改默认滚动条样式
前端项目修改默认滚动条样式写过挺多项目都需要改变滚动条的默认样式并不想单独下载和引入插件因此纯css修改默认滚动条的样式这次算统一整理下方法,直接上代码. &::-webkit-scr ...
vue修改默认滚动条样式
原链接: vue修改默认滚动条样式 ::-webkit-scrollbar {width: 4px; }::-webkit-scrollbar-thumb {border-radius: 10px;b ...
html下拉菜单隐藏属性,css修改selec下拉菜单样式
css修改selec下拉菜单样式2018-01-19 15:00 修改select下拉菜单样式其实可以使用javascript来操作,这样更方便. 但有些人并不喜欢,想用单纯的css来控制. 以下有三 ...
纯css实现带斜角的边框样式
纯css实现带斜角的边框样式,是边框哦展示效果斜角优化前(百度上找到的方法) 斜角优化后(想了个花里胡哨的办法) 直接贴代码说明下原理展示效果斜角优化前(百度上找到的方法) 斜角优化后(想了 ...
css 修改浏览器滚动条样式（火狐Firefox，谷歌google）
一.修改谷歌google: 修改样式: 1.全局修改,所有滚动条生效: ::-webkit-scrollbar{width:6px;height:6px; background-color: #000 ...
修改浏览器默认滚动条样式，兼容IE和谷歌
在项目中,很经常会需要修改浏览器滚动条的默认样式,因为浏览器本身的滚动条可能和设计师设计的页面很不搭配,话不多说上代码我饿 1.谷歌浏览器写法,webkit内核浏览器 ::-webkit-scroll ...

纯CSS修改浏览器的默认滚动条样式

纯CSS修改浏览器的默认滚动条样式相关推荐

最新文章

热门文章