谷歌滚动条样式(滚动条样式按钮)

有不少可以帮你修改Chrome默认滚动条样式的扩展,ScrollBarX就是其中的佼佼者,但是这个扩展在安装的时候提示说会存取所有的网站数据,这就让人感觉很难以接受了。其实咱们可以自己动手,丰衣足食。首先在自己的系统里找到如下这个.css文件:Windows:%LOCALAPPDATA%\Google\Chrome\UserData\Default\UserStyleSheets\…

大家好,又见面了,我是你们的朋友全栈君。

谷歌滚动条样式(滚动条样式按钮)

有不少可以帮你修改Chrome默认滚动条样式的扩展,Scroll Bar X就是其中的佼佼者,但是这个扩展在安装的时候提示说会存取所有的网站数据,这就让人感觉很难以接受了。其实咱们可以自己动手,丰衣足食。首先在自己的系统里找到如下这个.css文件:

Windows:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Mac:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

Ubuntu:
~/.config/chromium/Default/User\ StyleSheets/Custom.css

用任何一款文字编辑器打开之,加入以下代码:

::-webkit-scrollbar-track-piece{
	background-color:#fff;
	-webkit-border-radius:0;
}
::-webkit-scrollbar{
	width:8px;
	height:8px;
}
::-webkit-scrollbar-thumb{
	height:50px;
	background-color:#999;
	-webkit-border-radius:4px;
	outline:2px solid #fff;
	outline-offset:-2px;
	border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{
	height:50px;
	background-color:#9f9f9f;
	-webkit-border-radius:4px;
}

保存之后重新打开你的Chrome浏览器,看到变化了吧?其实这些都是基础的CSS代码,所以你可以随心所欲的定制。比如你觉得滚动条太细了,即可编辑以下这段代码里的宽度:

::-webkit-scrollbar{
	width:16px;
}

另外,其实Chrome的Web Inspector也是可以通过修改CSS来定制页面风格的,其CSS文件地址:

Windows:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Mac:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

Ubuntu:
~/.config/chromium/Default/User\ StyleSheets/Custom.css

Via GTricks

转载自:谷奥

转载于:https://www.cnblogs.com/cmleung/archive/2011/09/01/2161545.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/126888.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • C++的三种单例模式—–深度解析

    C++的三种单例模式—–深度解析简介因为在设计或开发中,肯定会有这么一种情况,一个类只能有一个对象被创建,如果有多个对象的话,可能会导致状态的混乱和不一致。这种情况下,单例模式是最恰当的解决办法。它有很多种实现方式,各自的特性不相同,使用的情…

    2022年5月27日
    37
  • 常用端口大全[通俗易懂]

    常用端口大全[通俗易懂]端口说明0无效端口,通常用于分析操作系统1传输控制协议端口服务多路开关选择器2管理实用程序3压缩进程5远程作业登录7回显9丢弃11在线用户13时间17每日引用18消息发送协议19字符发生器…

    2022年9月15日
    0
  • APP 抓包和微信小程序抓包-Charles 的精简使用教程

    APP 抓包和微信小程序抓包-Charles 的精简使用教程APP抓包和微信小程序抓包-Charles的精简使用教程目标教程一、安装Charles二、Charles简介(1)Charles欢迎页面(2)基础功能按钮(3)抓包内容显示方式(4)过滤抓包内容三、手机配置Charles代理四、解决配置Charles代理之后手机无法上网的问题五、手机APP抓包(1)对“花生地铁”APP进行抓包。六、微信小程序抓包(1)安装SSL…

    2022年6月14日
    96
  • idea整理代码idea快捷键

    idea整理代码idea快捷键idea整理代码快捷键:Catl+Alt+L

    2022年10月12日
    1
  • pycharm添加库_pycharm自带python吗

    pycharm添加库_pycharm自带python吗pycharm添加pythonpath文件不在要添加的目录底下有时候需要添加一个包,但是那个包就是一个很随意的路径,并不在python27文件夹底下,如何做呢?-如果这个包是正规的包,有init.py这个文件,那就容易了。如果是自己写的一个包,这个文件要加上,可以为空-在pycharm中点击File->settings->projectXXX->ProjectInterprete

    2022年8月27日
    2
  • lan8742a_常用以太网PHY芯片DM9161AEP、RTL8201、DP83848CVV、LAN8720A、LAN8742A「建议收藏」

    lan8742a_常用以太网PHY芯片DM9161AEP、RTL8201、DP83848CVV、LAN8720A、LAN8742A「建议收藏」常用的PHY芯片有DM9161AEP、RTL8201、DP83848CVV、LAN8720A、LAN8742A…DM9161AEP、DP83848CVV支持RMII、MII接口,而RTL8201只支持MII接口。拿DM9161AEP举例,可以支持8根通信线(TXD0/TXD1/TXD2/TXD3/RXD0/RXD1/RXD2/RXD3)的MII接口,也可以支持4根通信线(TXD0/TXD1/R…

    2022年6月17日
    75

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号