css 改变浏览器滚动条的样式
/*滚动条样式*/
.innerbox::-webkit-scrollbar {/*滚动条整体样式*/
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
}
.innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius:;
background: rgba(0,0,0,0.1);
}
<div class="inner">
<div class="innerbox">
<p style="height:200px;">这是内容111</p>
<p style="height:400px;">这里是内容222</p>
<p>这里是内容333</p>
</div>
</div>
css 改变浏览器滚动条的样式的更多相关文章
- CSS——改变浏览器滚动条样式
https://www.cnblogs.com/sun-rain/p/5789417.html
- 如何改变iframe滚动条的样式?
如何改变iframe滚动条的样式? web前端开发 css javascript iframe html RayLiao 2014年11月19日提问 · 2014年11月20日更新 关注 关注 收藏 ...
- CSS改变浏览器默认滚动条样式
前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式 比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决 注:经测试,目 ...
- 自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)
前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...
- [分享]CSS美化浏览器滚动条
今天看到一个站点的滚动条样式特别漂亮,顺便上网搜了一些相关资料,分享给大家: PS:兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏 ...
- css修改overflow滚动条默认样式
html代码 <div class="inner"> <div class="innerbox"> <p style=" ...
- [原创作品]html css改变浏览器选择文字的背景和颜色
又很久没有'剥壳'了,最近在为一家公司做一个生产管理解决方案.所以都很忙.今天的话题很简单,就做一个很简单的网页特效.今天偶然浏览到一个网站,他们在选择文字时,样子不是蓝背景和白色字体那么单调,感觉这 ...
- CSS设置浏览器滚动条样式
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 5px; height: 110px; background-color: #F5 ...
- 用css改变默认的checkbox样式
自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...
随机推荐
- python 删除文件夹
只能删除空文件夹,删除非空文件夹会报错 >>> import os >>> os.rmdir("/tmp/ssh-GyoPWOFZ47") Tr ...
- Spring Boot的数据访问 之Spring Boot + jpa的demo
1. 快速地创建一个项目,pom中选择如下 <?xml version="1.0" encoding="UTF-8"?> <project x ...
- 浅谈Java中的栈和堆
人们常说堆栈堆栈,堆和栈是内存中两处不一样的地方,什么样的数据存在栈,又是什么样的数据存在堆中? 这里浅谈Java中的栈和堆 首先,将结论写在前面,后面再用例子加以验证. Java的栈中存储以下类型数 ...
- sqlserver 中通配符%和_的使用
--以a开头的数据 SELECT * FROM BCUSTOMER_MZN WHERE CST_NAME LIKE 'A%' --以Z结尾的数据 SELECT * FROM BCUSTOMER_MZN ...
- STL_map.修改删除
1.修改示例 int TdrSvgAttr::AttrSet_mem(bool _bAttrInStyle, string &_strAttrName, string& _strAtt ...
- Object_C与JavaScript交互使用总结
iOS开发中oc与js交互的方式有很多,我们可以使用流行的第三方库如:WebviewJavaScriptBridge和OVGap,这两个库都是让webview与JS建立起一条桥梁,我们也可以使用iOS ...
- Android JNI 数组操作
JNI 中有两种数组操作,基础数据类型数组和对象数组,JNI 对待基础数据类型数组和对象数组是不一样的. 基本数据类型数组 对于基本数据类型数组,JNI 都有和 Java 相对应的结构,在使用起来和基 ...
- 如何在windows下安装与配置Appium
appium是一款open source 移动自动化测试框架,既支持Android 也支持IOS 工具/原料 JDK adt-bundle-windows node python appium rob ...
- You Don't Know JS: Scope & Closures (第2章: Lexical Scope)
2种主要的models for how scope work. 最普遍的是Lexical Scope. 另一种 Dynamic Scope.(在Appendix a中介绍.和Lexical Scope ...
- 矩阵最优路线DP
母题:矩阵中每个点有权值,每经过一个点就累加权值,求从a点到b点的最优(最大)路线. 题型1: 从左上到右下,只能向下或者向右 for 行 for 列 dp=max dp左,dp上; 扫一遍就行 有时 ...