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 ...
随机推荐
- 博客笔记（blog notebook）
1. 机器学习 2. NLP 3. code 实际好人 实际坏人 预测百分比 预测好人 \(p_GF^c(s_c\|G)\) \(p_BF^c(s_c\|B)\) \(F^c(s_c)\) 预测坏人 ...
- Xcode中断点的使用
注:本文由破船译自:albertopasca.本文由HoNooD在iosfeed站点上做了推荐. 这里先推荐两篇Xcode相关的文章: Xcode Code Snippets iOS调试 — 基本技巧 ...
- HDU-3523 Image copy detection
题意难懂... 大意上说就是给m个排列P1,P2,P3...Pm,自己求个排列T使得T与Pi的各个数的绝对值差之和最小. 其实也就是二分最小匹配了.... #include <cstdlib&g ...
- 刷题总结——book of evil（codefoeces 337D）
题目: description Paladin Manao caught the trail of the ancient Book of Evil in a swampy area. This ar ...
- Java众神之路（1）-语言介绍
Java语言介绍 1.Java的历史 我个人认为,学习一种技术,不止要关注技术本身,也应该去了解一下它的发展史,这一方面是对技术本身的尊重,另一方面也是希望能够通过该技术的发展历史推测出其未来可能的发 ...
- 仔细瞄一下HashMap是怎么干活的
以下分析基于jdk11.0.2 1. 创建HashMap时发生了什么? HashMap(),HashMap(int initialCapacity),HashMap(int initialCapaci ...
- Codeforces989E. A Trance of Nightfall
$n \leq 200$个平面上的点,$q \leq 200$次询问:重复操作$m \leq 10000$次,到达点$x$的概率最大是多少.操作:一开始选点$P$,不一定要是给定点,可以是平面上任一点 ...
- Error querying database找不到数据库的错误可能发生的原因..
这个问题纠结了大概两个小时.原因是这样的,我刚刚换了一台新的电脑,准备把以前电脑上自己搭建的小项目放到新电脑上面,用myeclipse引入项目之后,启动项目在浏览器跑起来.然后输入账号密码登录主页,报 ...
- 标准C程序设计七---63
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- 52深入理解C指针之---不透明指针
该系列文章源于<深入理解C指针>的阅读与理解,由于本人的见识和知识的欠缺可能有误,还望大家批评指教.一.size_t:用于安全表示长度,所有平台和系统都会解析成自己对应的长度 1.定义:s ...