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

2022-03-23 14:22

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

#5468复制
#

具体方法:

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滚动条样式修改怎么操作_chrome浏览器滚动条样式定制设置方法

 

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

::-webkit-scrollbar-thumb:active{

height:50px;

background-color:#000;

-webkit-border-radius:4px;

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

网友评论

相关阅读

最近更新