自定义谷歌浏览器的滚动条样式
自打升级了Chrome 26,大D突然发现滚动条变得特别细小。拖动都困难。。
放Google一搜索,得知Chrome可以自定义滚动条的样式,改一下CSS就可以了。
Windows XP:
1 |
C:\Documents and Settings\你的用户名\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css |
Windows(7\8):
1 |
C:\Users\你的用户名\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css |
打开Custom.css,添加如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/*---滚动条默认显示样式--*/ ::-webkit-scrollbar-thumb{ background-color:#028ee5; 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:9px; height:9px; } /*---滚动框背景样式--*/ ::-webkit-scrollbar-track-piece{ background-color:#fff; -webkit-border-radius:0; } |
切记:保存后重启浏览器。
最终效果如下:
2013-04-05 修订
CSS文件采用UTF8编码会失效。失效时,选择存储成UTF-8无ROM编码即可解决。
版权声明
转载保留版权: 大D技研室 | 《自定义谷歌浏览器的滚动条样式》
本文链接地址:https://www.dadclab.com/archives/3237.jiecao
转载须知:如果您需要转载本文,请将版权信息,版权授权方式,以及本文的链接地址注明,谢谢合作。
本文被贴上了: Chrome , CSS , Google , Google Chrome , 自定义 标签
sf
@frankiez PK神速啊
第一在大D站留言,小白不敢做沙发。。。
@Marx 原来是BOSS song
该代码在utf8编码下异常,请问怎么改?
@cc 变一下文件编码试试
@大D 问题是我css还有字体替换的代码有用到中文字体名称,因为custom.css的ansi编码不支持中文,所以只能改为utf8。unicode则是全部失效。博主这行代码在多个页面测试不仅美观而且不伤已有定义的滚动条,只是在utf8编码下不工作。
@cc utf8还有无ROM编码,你转换成UTF-8无ROM编码的。我刚才试过了,直接用UTF-8会出问题,UTF-8无ROM就没问题。如果你现在用ANSI,直接转换可能会导致问题,可以先复制出来,然后再新建一个UTF-8无ROM编码的文件,贴回去就OK了
@大D 刚打开浏览器就发现博主回复了,非常感谢博主。按照此方法已经解决了,在这之前我压根不知道utf8还有bom编码的,受教于博主。
@cc 客气了~~~多交流就多进步的说~~