css修改整个项目的滚动条样式
在项目中,滚动条不可避免的要出现。设置统一规范的滚动条也是必然。用一个独立的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修改整个项目的滚动条样式的更多相关文章
- css修改浏览器默认的滚动条样式
//滚动条样式 ::-webkit-scrollbar { width: 10px; } /* 垂直滚动条的滑动块 */ ::-webkit-scrollbar-thumb:vertical { bo ...
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
- css修改select下拉列表的默认样式
select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...
- CSS修改input[type=range]滑块样式
input[type="range"]是html5中的input标签新属性,样子如下: <input type="range" value="4 ...
- 纯CSS修改checkbox复选框样式-02
我有用过这个纯修改input属性的 本人修改后的代码和效果图(修的不好), 这个是改动最简单的: css代码 input[type=checkbox]{ visibility: hidden; } i ...
- 纯CSS修改checkbox复选框样式
借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- 利用CSS 修改input=radio的默认样式(改成选择框)
html部分: <input id="item2" type="radio" name="item"> <label fo ...
- css修改,类似elememt.style样式修改
使用!important 语法优先权. .yui-b { margin-left:0px ! important; }
- 纯css修改复选框默认样式
input[type='checkbox']{ width: 20px; height: 20px; background-color: #fff; -webkit-appearance:none; ...
随机推荐
- hyperscan应用参数
>>hs_compile_ext_multi 使用额外的参数编译表达式, 额外的参数包括: MIN_OFFSET 距离开始的最小偏移开始匹配 MAX_OFFSET 距离开始的最大偏移结束匹 ...
- Spring+Mybatis+SpringMVC+Maven+MySql搭建实例(转)
http://blog.csdn.net/evankaka/article/details/48785513?spm=5176.100239.blogcont28591.10.9Fdj9R
- 我的代码-statistic analysis
# coding: utf-8 # In[1]: # numpy and pandas for data manipulationimport numpy as npimport pandas as ...
- 利用Python中的for循环和while循环,打印各种方向的九九乘法表。
哈喽大家好,今天,可乐来给大家分享一下Python中用for循环和while循环打印九九乘法表的操作.由于本人也是刚刚接触Python不长时间,代码也是自己编写的,所以有什么不足之处还请大家多多指教. ...
- 如何将本地git仓库中的代码上传到github
1, 在github上新建一个仓库,比如为:CSS3Test,仓库地址为:https://github.com/hyuanyuanlisiwei/CSS3Test 2,本地git仓库中的文件项目为C ...
- LibreOffice字体问题解决;从window复制到Ubuntu
拷贝或下载windows系统的Fonts字体集到对应的linux系统下;以ubuntu16.04系统为例. 1.进入windows系统,到C:WindowsFonts目录,复制拷贝自己需要的字体(也可 ...
- java_集合类_简
Collection 来源于Java.util包,实用常用的数据结构,字面意思就是容器 主要方法 boolean add(Object o)添加对象到集合 boolean remove(Object ...
- 学习笔记CB012: LSTM 简单实现、完整实现、torch、小说训练word2vec lstm机器人
真正掌握一种算法,最实际的方法,完全手写出来. LSTM(Long Short Tem Memory)特殊递归神经网络,神经元保存历史记忆,解决自然语言处理统计方法只能考虑最近n个词语而忽略更久前词语 ...
- Kali Linux系统的安装、配置、使用
这个随便写的,随便看看就好,主要给讲一下安装过程 这里因为我物理机装的本来就是kali.所以懒得重装了,直接拿虚拟机演示一下 物理机安装kali的话,推荐使用rufus使用dd模式刻盘,不会造成之后的 ...
- Vue2.5基础
1.1 创建第一个Vue实例 官方网站:https://cn.vuejs.org 学习 --> 安装 刚开始学习Vue,使用最简单的安装方式,直接用<script>引入 我们下载开发 ...