/*滚动条样式*/
.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 改变浏览器滚动条的样式的更多相关文章

  1. CSS——改变浏览器滚动条样式

    https://www.cnblogs.com/sun-rain/p/5789417.html

  2. 如何改变iframe滚动条的样式?

    如何改变iframe滚动条的样式? web前端开发 css javascript iframe html RayLiao 2014年11月19日提问 · 2014年11月20日更新 关注 关注 收藏 ...

  3. CSS改变浏览器默认滚动条样式

    前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式   比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决   注:经测试,目 ...

  4. 自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

    前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...

  5. [分享]CSS美化浏览器滚动条

    今天看到一个站点的滚动条样式特别漂亮,顺便上网搜了一些相关资料,分享给大家: PS:兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏 ...

  6. css修改overflow滚动条默认样式

    html代码 <div class="inner"> <div class="innerbox"> <p style=" ...

  7. [原创作品]html css改变浏览器选择文字的背景和颜色

    又很久没有'剥壳'了,最近在为一家公司做一个生产管理解决方案.所以都很忙.今天的话题很简单,就做一个很简单的网页特效.今天偶然浏览到一个网站,他们在选择文字时,样子不是蓝背景和白色字体那么单调,感觉这 ...

  8. CSS设置浏览器滚动条样式

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 5px; height: 110px; background-color: #F5 ...

  9. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

随机推荐

  1. wxss与rpx

    WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. WXSS 用来决定 WXML 的组件应该怎么显示. 为了适应广大的前端开发者,WXSS 具有 CSS ...

  2. Ubuntu 编译安装 Xdebug

    安装xdebug 1.下载 https://xdebug.org/download.php 找到PHP5.6对应的版本 https://xdebug.org/files/xdebug-2.5.5.tg ...

  3. 设计模式(八)Proxy Parttern 代理模式

    核心作用: 通过代理,控制对对象的访问 可以详细控制某个对象的方法,在调用这个方法做前置处理,调用这个方法后做后置处理(AOP的微观实现) AOP(Aspect Oriented Programmin ...

  4. Pycharm设置去除显示的波浪线

    1.选择文件选择file—Settings,如下图打开setting对话框 2.选择Editur—Color Scheme—General选项,然后选择右边对话框中的Errors and Warnin ...

  5. main方法介绍

    main方法是程序的入口点,程序从这里开始,也是从这里结束. 执行过程:程序在执行编译的过程中先找main方法,然后执行main‘{’下的第一行代码,以此执行,如果遇到main方法中有调用其他的方法时 ...

  6. EditPlus查找替换

    换行符\n,记得选择正则表达式 1]正则表达式应用——替换指定内容到行尾解决:① 在替换对话框,查找内容里输入“abc.*”② 同时勾选“正则表达式”复选框,然后点击“全部替换”按钮其中,符号的含义如 ...

  7. Android集成人脸识别demo分享

    本应用来源于虹软人工智能开放平台,人脸识别技术工程如何使用? 1.下载代码 git clone https://github.com/andyxm/ArcFaceDemo.git 2.下载虹软人脸识别 ...

  8. CSS sprite使用

    CSS Sprites叫css精灵或者雪碧图,是一种网页图片应用处理方式. CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”, ...

  9. HG255D 刷机备忘

    <该死的系统,就是不重启.这文章也没意义了> 1.前期固件准备:①软件:XXXXX.bin②openwrt固件:XXXX.bin(我用的是shcl版的,感觉还不错,你也可以刷其他版本的) ...

  10. 算法:最短路径之弗洛伊德(Floyd)算法

    https://cloud.tencent.com/developer/article/1012420 为了能讲明白弗洛伊德(Floyd)算法的主要思想,我们先来看最简单的案例.图7-7-12的左图是 ...