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; ...
随机推荐
- vue生命周期图片
- 通用Mapper的各个方法描述,参考官方
下面是通用Mapper的各个方法描述,主要还是看官方的描述https://mapperhelper.github.io/all/. 基础接口 Select 接口:SelectMapper<T&g ...
- 第三次Scrum冲刺————Life in CCSU
# 第三次Scrum冲刺————Life in CCSU # 一.第三次Scrum任务 小组GitHub地址链接:https://github.com/LoneylittleTeam/Team 个人G ...
- GitHub 优秀的项目地址
Type LibDescription LibLocation Android SlidingMenu https://github.com/jfeinstein10/SlidingMenu ...
- 在VMware上安装CentOS6 64位操作系统
---恢复内容开始--- 1.创建新的虚拟机 2.选择自定义,点击下一步: 3.找到镜像位置,添加: 4.点击“稍后安装操作系统”,点击“下一步”: 5.默认点击“下一步”,然后分配CPU: 这里内存 ...
- Mac上,Apache启动正常,却无法访问localhost和127.0.0.1
mac系统,之前一直好好的,今天突然localhost以及127就突然打不开了.显示拒绝访问. 各种方法都试过了,不是端口占用, 不是日志文件缺失,任何情况都不是. 想了想,之前有升级过PHP从5升级 ...
- node.js同步读取与异步读取文件
- vue day4 table
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Linux 6.8 源码安装MySQL8.0
搭建环境说明: 系统版本:Red Hat Enterprise Linux Server release 6.8 (Santiago) 内核版本:Linux 2.6.32-642.el6.x86_64 ...
- 《DSP using MATLAB》Problem 7.25
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...