chrome滚动条样式修改怎么操作_chrome浏览器滚动条样式定制设置方法

admin3年前电脑知识78

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文件里面,保存后重启谷歌浏览器,滚动条就会变成这样,当然,你也可以自己修改,颜色大小圆角那些。

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

::-webkit-scrollbar-thumb:active{

height:50px;

background-color:#000;

-webkit-border-radius:4px;

}

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

免责声明:本文内容来自用户上传并发布,站点仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。请核实广告和内容真实性,谨慎使用。

相关文章

cpt是什么文件,cpt文件怎么打开?

cpt文件扩展名,cpt文件怎么打开?.cpt文件类型1:Pocket Slides Presentation文件说明:Presentation created by Conduits Pocket...

trk是什么文件,trk文件怎么打开?

trk文件扩展名,trk文件怎么打开?.trk文件类型1:Garmin Track File文件说明:File created by Garmin GPS devices, including the...

win7目前有几个版本_win7版本有什么区别

Win7系统在很多人心中都是非常经典的操作版本,甚至不少用户现在依然使用win7系统。相信屏幕前的你也很喜欢win7系统,那么你是否知道win7有几个版本,以及这些版本的区别呢?下面小编就为大家带来了...

免费windows7专业版官方下载_专业版win7系统iso镜像文件下载

win7之家为大家提供免费windows7专业版官方下载,系统有着原版专业版的所有功能,且经过专业技术人员的优化修改,系统性能都得大大增强,删减很多不必要的服务。首次进入系统立即开启扫描模式,发现木马...

s19是什么文件,s19文件怎么打开?

s19文件扩展名,s19文件怎么打开?.s19文件类型:Motorola S19 File Record扩展名为.s19的文件是一个开发文件。文件说明:Contains low-level machi...

pyw是什么文件,pyw文件怎么打开?

pyw文件扩展名,pyw文件怎么打开?.pyw文件类型:Python GUI Source File扩展名为.pyw的文件是一个开发文件。文件说明:Python script that display...