教你自定义谷歌浏览器的滚动条样式
谷歌浏览器界面的简洁,我想不用多说了吧,从我第一次用谷歌浏览器就被这界面迷住了,我真的找不到比这界面更好看、简洁到极致的浏览器了。你说火狐速度快、好用是么,可是那界面,我真的放弃了。我玩游戏也是这样,如果里面的人物太丑(WOW?)或者游戏不是3D的,那么再好玩我也玩不下去(事实上我玩游戏好多玩不懂,主要看里面的世界的,找不到乐趣)。chrome貌似设计理念就是留给网页尽量大的显示面积。但是还是有人不满滚动条那么宽,于是做了一个插件来把滚动条变窄以留给网页更多的空间,那插件我试过,不过用过后感觉那滚动条是1px也太细了吧,有时候都拖不到了。然后上次在chrome迷里面看到介绍改滚动条的,当然第一时间就要拿过来学习。改过后觉得很满意,于是把方法给大家贴出来,也便于我以后查看。
Windows XP(要显示隐藏文件夹):
C:\Documents and Settings\你的用户名\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets
Windows(7\8):
系统盘:\Users(用户)\你的用户名\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
Mac:
/Users/你的用户名/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
Ubuntu:
~/.config/chromium/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:#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; } |
把以上代码粘贴到custom.css文件里面,保存后重启谷歌浏览器,滚动条就会如你所愿了。
当然,你也可以自己修改,颜色大小圆角那些。
CSS里面hover是设置鼠标放上链接的颜色,同样的,active也可以设置鼠标点击的颜色,只要到上面的代码添加如下代码就行了。
1 2 3 4 5 |
::-webkit-scrollbar-thumb:active{ height:50px; background-color:#000; -webkit-border-radius:4px; } |