overflow滚动条样式设置，ie和webkit内核
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> <style>
body{
/*ie下修改滚动条样式，在webkit内核浏览器无效*/
/*scrollbar-arrow-color: #f4ae21;三角箭头的颜色
scrollbar-face-color: #333; *立体滚动条的颜色
scrollbar-3dlight-color: #666; 立体滚动条亮边的颜色
scrollbar-highlight-color: #666; 滚动条空白部分的颜色
scrollbar-shadow-color: #999; 立体滚动条阴影的颜色
scrollbar-darkshadow-color: #666; 立体滚动条强阴影的颜色
scrollbar-track-color: #666; 立体滚动条背景颜色
scrollbar-base-color:#f8f8f8; 滚动条的基本颜色
Cursor:url(mouse.cur);自定义个性鼠标*/
}
div{
height:100px;
width:200px;
overflow:auto;
}
td{
display:inline-block;
margin:10px 20px;
}
/*webkit内核浏览器修改滚动条样式*/
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0,0,0,0.2);
}
::-moz-scrollbar {
width: 8px;
}
::-moz-scrollbar-thumb {
border-radius: 10px;
background: rgba(0,0,0,0.2);
}
/*当前窗口未激活的情况下*/
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0,0,0,0.1);
}
/*hover到滚动条上*/
::-webkit-scrollbar-thumb:vertical:hover{
background-color: rgba(0,0,0,0.3);
}
/*滚动条按下*/
::-webkit-scrollbar-thumb:vertical:active{
background-color: rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>12345</td>
<td>12345</td>
</tr>
<tr>
<td>12345</td>
<td>12345</td>
</tr>
<tr>
<td>12345</td>
<td>12345</td>
</tr>
<tr>
<td>12345</td>
<td>12345</td>
</tr>
</table>
</div>
</body>
</html>
如有错误，请您指正！
overflow滚动条样式设置，ie和webkit内核的更多相关文章
- CSS文本溢出效果&滚动条样式设置
一.文本溢出 1.overflow: hidden; 超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...
- CSS滚动条样式设置
webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...
- [CSS]滚动条样式设置
概述 最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需要以滚动条的形式展现,当时也考虑了使用webbrower的滚动条 ...
- listview-fading 滚动条样式设置
fadingEdge-属性用来设置拉滚动条时 ,边框渐变的方向.它有三个属性值可以设置 none:(边框颜色不变) horizontal:(水平方向颜色变淡) vertical:(垂直方向颜色变淡). ...
- vue 滚动条样式设置
App.vue 文件下加入下面css // 滚动条宽度 ::-webkit-scrollbar{ width: 6px; } /* 定义滚动条轨道 */ ::-webkit-scrollb ...
- 【前端】webkit内核浏览器DIV滚动条样式修改和设置
webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...
- CSS3自定义滚动条样式-webkit内核
自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit ...
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
- 自定义滚动条样式-兼容IE
滚动条样式设置 html部分: 1 <div id="scroll" style="width: 500px; height: 300px; border: 2px ...
随机推荐
- RIP 路由协议
RIP动态路由选择协议 routing information protocol IGP 小范围 路由器限制为15台 超过可能无法收敛 收敛概念 在一个域内 各个路由器知道各 ...
- Codeforces Round #410 (Div. 2) B. Mike and strings
B. Mike and strings time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- 【bzoj4080】[Wf2014]Sensor Network 随机化
题目描述 魔法炮来到了帝都,除了吃特色菜之外,还准备去尝一尝著名的北京烤鸭.帝都一共有n(1<=1<=100)个烤鸭店,可以看成是二维平面内的点.不过由于魔法炮在吃烤鸭之前没有带钱,所以吃 ...
- Eclipse或MyEclipse没有在java类文件上显示Spring图标的问题
Eclipse或MyEclipse没有在java类文件上显示接口图标的问题解决办法: 前: 后:
- cf 472G Design Tutorial: Increase the Constraints 分块+压位/FFT
题目大意 给出两个\(01\)序列\(A\)和\(B\) 哈明距离定义为两个长度相同的序列中,有多少个对应位置上的数字不一样 "00111" 和 "10101" ...
- Windows PowerShell Exit Codes
Windows PowerShell Exit Codes PSMDTAG:FAQ: How can my script control the PowerShell exit code? Answe ...
- luogu 1142 轰炸 最多共线点数
题目链接 题意 给定\(n(n\leq 700)\)个点,问共线的点最多有多少个? 思路 \(O(n^3)\):枚举两个顶点确定一条直线,再看有多少个顶点在这条直线上.讲道理会T. \(O(n^2lo ...
- Opus 和 AAC 声音编码格式
Opus编码器 是一个有损声音编码的格式,由互联网工程任务组(IETF)近来开发,适用于网络上的实时声音传输,标准格式为RFC 6716.Opus 格式是一个开放格式,使用上没有任何专利或限制. Op ...
- LNMP 之 Nginx负载均衡服务器
Nginx负载均衡服务器 参考教程:[千峰教育] 准备工作: 三台服务器,每台服务器都需要安装nginx. 1.关闭防火墙 service iptables stop2.关闭Selinux seten ...
- Day 17 编码+文本编辑+函数
知识点篇: #! /usr/bin/env python # -*- coding: utf-8 -*- # __author__ = "DaChao" # Date: 2017/ ...