在项目中,滚动条不可避免的要出现。设置统一规范的滚动条也是必然。用一个独立的css文件即可修改整个项目中的滚动条样式 。

scrollBar.css:

/* 滚动条有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
background-color: #00000000;
border-radius:;
} /* 整个滚动条 */
::-webkit-scrollbar {
width: 8px;
} /* 滚动条竖向滑块 */
::-webkit-scrollbar-thumb:vertical {
background-color: rgba(255, 255, 255, .1);
border-radius: 2px;
} /* 滚动条竖向滑块hover */
::-webkit-scrollbar-thumb:vertical:hover {
background-color: rgba(255, 255, 255, .2);
border-radius: 4px;
} /* 滚动条横向滑块 */
::-webkit-scrollbar-thumb:horizontal {
background-color: rgba(255, 255, 255, .1);
border-radius: 2px;
} /* 滚动条横向滑块hover */
::-webkit-scrollbar-thumb:horizontal:hover {
background-color: rgba(255, 255, 255, .2);
border-radius: 4px;
} /* 同时有垂直和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
display: block; /* 修复交汇时出现的白块 */
}

css修改整个项目的滚动条样式的更多相关文章

  1. css修改浏览器默认的滚动条样式

    //滚动条样式 ::-webkit-scrollbar { width: 10px; } /* 垂直滚动条的滑动块 */ ::-webkit-scrollbar-thumb:vertical { bo ...

  2. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

  3. css修改select下拉列表的默认样式

    select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...

  4. CSS修改input[type=range]滑块样式

    input[type="range"]是html5中的input标签新属性,样子如下: <input type="range" value="4 ...

  5. 纯CSS修改checkbox复选框样式-02

    我有用过这个纯修改input属性的 本人修改后的代码和效果图(修的不好), 这个是改动最简单的: css代码 input[type=checkbox]{ visibility: hidden; } i ...

  6. 纯CSS修改checkbox复选框样式

    借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  7. 利用CSS 修改input=radio的默认样式(改成选择框)

    html部分: <input id="item2" type="radio" name="item"> <label fo ...

  8. css修改,类似elememt.style样式修改

    使用!important 语法优先权. .yui-b { margin-left:0px ! important; }

  9. 纯css修改复选框默认样式

    input[type='checkbox']{ width: 20px; height: 20px; background-color: #fff; -webkit-appearance:none; ...

随机推荐

  1. Day8 linux软件包管理

    软件包的两种形式      qq.tar.gz  (需要编译 源码翻译成二进制)/ rpm (直接安装) rpm的文件名分为5部分 name名称  version版本编号  release发布次数  ...

  2. PHP常用函数(一):数组常用函数

    1.list() list() 和 array() 一样,不是一个函数,而是一个语言结构,作用是为一组变量赋值.  PHP手册中的介绍 使用详情 <?php //假设现在想为$a $b $c三个 ...

  3. 请求转发和URL重定向的原理和区别

    一.请求转发和重定向是在java后台servlet中,由一个servlet跳转到另一个servlet/jsp要使用的技术 使用方法 请求转发  req.getResquestDispatcher(se ...

  4. Servlet中的编码问题

    对于response.setContentType()和response.setCharacterEncoding()的理解: 经过一些实践,对着两个方法有了一些自己的理解,有可能今后的学习中会发现自 ...

  5. NPM,bower的安装目录

    npm安装成功的话(需设置系统环境变量,见http://www.cnblogs.com/liaocheng/p/4531898.html有介绍) npm的安装目录 安装nodejs时,如果没有设置以下 ...

  6. CMDB-实例

    目录规划 bin ------> 启动文件 lib -------> 常见的库文件 src ------> 采集的核心代码 conf ----> 配置目录 log ------ ...

  7. 渗透测试学习 三、Linux基础

    Linux发行版本  内核+应用程序  打包在一起 一.优点: 完全免费 完全兼容POSIX 1.0标准 多用户,多任务 良好的界面 可靠安全稳定的性能 支持多种平台 丰富的网络功能 安全性更好(针对 ...

  8. Buaa菜鸡从今天好好学打码,好好学数学,好好学英语,好好打篮球,好好锻炼,好好吃饭,好好... 好好找女朋友!

    新链接: https://iamparasite.github.io/

  9. Mybatis---架构图

  10. canvas画小叮当

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...