chrome滚动条样式修改怎么操作 如何取消滚动条样式

chrome 浏览器是由谷歌开发的一款简单便捷的网页浏览工具,我们在电脑中使用 chrome 浏览器浏览网页的时候,页面右边就会有一个可选择的滚动条,对此有些用户觉得滚动条样式很是单一,因此就想要进行修改,那么 chrome 滚动条样式修改怎么操作呢?下面小编就来教大家 chrome 浏览器滚动条样式定制设置方法。

chrome滚动条样式修改怎么操作 如何取消滚动条样式插图电脑技术吧

google 浏览器 64 位下载地址 v84.0.4147.105

64 位 google 浏览器 v84.0.4147.105 是一款可让您更快速、轻松且安全地使用网络的浏览器,它的设计超级简洁,使用起来更加方便,并在最快浏览器评选中获得最高分,google 浏览器 Chrome 的特点是简洁、快速,采用自身研发的内核,用户使用后反馈效果也是相当不错。

具体方法:

1、用记事本打开 custom.css 文件,复制下面的代码

/*--- 滚动条默认显示样式 --*/

::-webkit-scrollbar-thumb{

background-color:#018EE8;

height:50px;

outline-offset:-2px;

outline:2px solid #fff;

-webkit-border-radius:4px;

border: 2px solid #fff;

}

/*--- 鼠标点击滚动条显示样式 --*/

::-webkit-scrollbar-thumb:hover{

background-color:#FB4446;

height:50px;

-webkit-border-radius:4px;

}

/*--- 滚动条大小 --*/

::-webkit-scrollbar{

width:8px;

height:8px;

}

/*--- 滚动框背景样式 --*/

::-webkit-scrollbar-track-piece{

background-color:#fff;

-webkit-border-radius:0;

}

2、把以上代码粘贴到 custom.css 文件里面,保存后重启谷歌浏览器,滚动条就会变成这样,当然,你也可以自己修改,颜色大小圆角那些。

chrome滚动条样式修改怎么操作 如何取消滚动条样式插图1电脑技术吧

3、CSS 里面 hover 是设置鼠标放上链接的颜色,同样的,active 也可以设置鼠标点击的颜色,只要到上面的代码添加如下代码就行了。

::-webkit-scrollbar-thumb:active{

height:50px;

background-color:#000;

-webkit-border-radius:4px;

}

上述就是 chrome 浏览器滚动条样式定制设置方法了,还有不清楚的用户就可以参考一下小编的步骤进行操作,希望能够对大家有所帮助。

正文完
 0