更改谷歌浏览器滚动条样式

修改全局滚动条：

            &::-webkit-scrollbar {width: 6px;height: 6px;background: transparent;}&::-webkit-scrollbar-thumb {background: transparent;border-radius: 4px;}&:hover::-webkit-scrollbar-thumb {background: hsla(0, 0%, 53%, 0.4);}&:hover::-webkit-scrollbar-track {background: hsla(0, 0%, 53%, 0.1);}

修改某个滚动条：在前面加上一个类选择器，如下：

            .test::-webkit-scrollbar {width: 6px;height: 6px;background: transparent;}.test::-webkit-scrollbar-thumb {background: transparent;border-radius: 4px;}.test:hover::-webkit-scrollbar-thumb {background: hsla(0, 0%, 53%, 0.4);}.test:hover::-webkit-scrollbar-track {background: hsla(0, 0%, 53%, 0.1);}

更改谷歌浏览器滚动条样式相关推荐

css修改谷歌浏览器和火狐浏览器的滚动条样式
css代码谷歌浏览器滚动条样式: ::-webkit-scrollbar {background: #f7f7f9;width: .08rem; /* 纵向滚动条滑块宽度 */height: .09 ...
使用deep穿透更改 Element ui 样式在谷歌浏览器生效，而在火狐浏览器不生效问题
使用/deep/穿透更改组件库样式在火狐浏览器不生效原因 /deep/ 穿透如果只是添加在父级的话,那么在火狐浏览器和谷歌浏览器都是生效的 /deep/ .father {width: 100%;he ...
关于ie，火狐，谷歌浏览器滚动条的隐藏以及自定义样式
最近做了一个项目,要求各个浏览器统一滚动条的样式,不显示滚动条,但是不影响鼠标的滑动事件. 查了很多资料,ie和谷歌都是可以自定义滚动条样式的,但是ie只能改变颜色,并不能修改宽度,圆角之类的.谷歌就 ...
css 滚动条样式_那些你总是记不住但又总是要用的css
有没有经常遇到一些样式每次写都要用百度呢?我收集了一些我平时经常要用到的但又总是记不住的样式.有错误的地方欢迎指正.转载请注明出处. 一.设置input 的placeholder的字体样式 input ...
css 默认显示滚动条,css控制默认滚动条样式
针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...
修改火狐浏览器滚动条样式
一.安装jquery和niceScroll ① npm install jquery ②在vue.config.js中添加如下代码 (如报ReferenceError: webpack is not ...
CSS设置滚动条样式
今天在写一个项目的时候遇到了,这样一个小难点要设置一个类似于页面的滚动条,查阅了相关文档之后,我会了一.我们可以使用overflow属性设置是否出现滚动条overflow:scroll /* x ...
自定义IE浏览器滚动条样式
自定义IE浏览器滚动条样式原文地址:http://www.cnblogs.com/koleyang/p/5484922.html 追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支 ...
html5滚动条样式修改,css修改滚动条样式
在css中怎样改变滚动条的样式 /*IE滚动条颜色设置*/body {scrollbar-arrow-color:#f2f2f3;/*上下箭头*/scrollbar-track-color:#1589 ...

更改谷歌浏览器滚动条样式

更改谷歌浏览器滚动条样式相关推荐

最新文章

热门文章