跳到内容

2016年03月18日

添加博客页面滚动条样式

作者:Warm​Color

#适用于Webkit内核的浏览器,如Chrome以及各种国产XXX极速浏览器

#可以通过浏览器扩展实现所有网页滚动条修改(请看文章最后)

之前发过一篇文章:webkit scrollbar 自定义滚动条

后来博客搞过很多次迁移改主题之类的事情,当时修改的样式丢失了,今天不经意看到就恢复过来。

添加在wordpress的主题的自定义CSS文件即可,代码如下:

::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(10,100,200,0.8);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(200,100,10,0.8);
    border-radius: 5px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
    border-radius: 5px;
}

a:visited { //访问过的链接变浅色,酌情添加
    color: #B5B5B5 ;
}

关于Chrome的全局修改方法,需要安装扩展Stylebot(或同类其他扩展),在该扩展的设置页面按如下操作:

在Styles页面,点击Add a new style…

20160318181035

在弹出的窗口中,上方的空输入两个星号,下方的空填入上面的代码

20160318181110

保存后刷新页面显示。

EOF

打赏

原文链接: http://blog.warmcolor.net/?p=4473
转载本站文章请注明,转载自:温暖色调[ http://blog.warmcolor.net ]
本作品采用: 知识共享许可协议 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.

文章类别: 维护日志, 编程

发表评论

主要:允许使用HTML代码,你的邮箱信息不会被公开。

订阅评论

*必填
*必填