overflow滚动条样式设置，ie和webkit内核
2024-09-29 23:02:11
<!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>
如有错误，请您指正！
最新文章
- go语言 类型:数组
- MFC 文件对话框
- JavaScript模拟函数重载
- AutoResetEvent信号锁 waitone set 执行一次线程退出 挺不爽的地方
- powerdesigner 绘制表关系和导出sql
- Solr查询详解
- 基础数据结构 之 树（python实现）
- 让你一分钟认识电子身份验证系统EID
- call stack 如何调用
- [Swust OJ 603]--吃饺子大王
- 网络资源(9) - TDD视频
- Mysql基础知识整
- IDE-IntelliJ IDEA 主题、字体、编辑区主题、文件编码修改、乱码问题
- BZOJ_1858_[Scoi2010]序列操作_线段树
- Spring.Net 入门学习笔记-----one
- 基础环境系列：MySQL8.0.12
- nexus 随笔
- 背水一战 Windows 10 (115) - 后台任务: 通过 toast 激活后台任务, 定时激活后台任务
- ssm框架所需jar包整理及各jar包的作用
- 下载chrome插件和离线安装CRX文件的方法