现在我打开支持前缀-webkit-的浏览器，也就是说只要支持前缀为-webkit-的浏览器才有效果

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>css3伪选择器改变滚动条样式</title>

  <style>

     .thumb{

       width:300px;

       height:600px;

       overflow:auto;

     }

     .thumb::-webkit-scrollbar{

        /*滚动条整体*/

        width:10px;

     }

     .thumb::-webkit-scrollbar-track{

        /*滚动条里面的轨道*/

        box-shadow:inset 0 0 5px;

        border-radius:5px;

     }

     .thumb::-webkit-scrollbar-thumb{

        /*滚动条轨道里面的方块*/

        border-radius:5px;

        background-color: gray;

        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

        background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

        background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

        background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

     }

  </style>

 </head>

 <body>

    <div class="thumb">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, excepturi, dicta, quam sed enim ratione molestias obcaecati blanditiis fugit cumque atque unde delectus. Repellat quo officia dolores inventore doloremque dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, excepturi, dicta, quam sed enim ratione molestias obcaecati blanditiis fugit cumque atque unde delectus. Repellat quo officia dolores inventore doloremque dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, excepturi, dicta, quam sed enim ratione molestias obcaecati blanditiis fugit cumque atque unde delectus. Repellat quo officia dolores inventore doloremque dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, excepturi, dicta, quam sed enim ratione molestias obcaecati blanditiis fugit cumque atque unde delectus. Repellat quo officia dolores inventore doloremque dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, excepturi, dicta, quam sed enim ratione molestias obcaecati blanditiis fugit cumque atque unde delectus. Repellat quo officia dolores inventore doloremque dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, excepturi, dicta, quam sed enim ratione molestias obcaecati blanditiis fugit cumque atque unde delectus. Repellat quo officia dolores inventore doloremque dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, excepturi, dicta, quam sed enim electus. Repellat quo officia dolores inventore doloremque dolor.</div>

 </body>

</html>

Chrome

笔记：css3伪选择器改变滚动条样式的更多相关文章

  1. CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器)

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; /*滚动条宽度*/ height: 16px; /*滚动条高度*/ } ...

  2. css：改变滚动条样式

    以下亲测谷歌内核的浏览器有用,微软和火狐无效 body::-webkit-scrollbar {/*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1 ...

  3. css改变滚动条样式

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

  4. webkit浏览器下改变滚动条样式

    /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); ba ...

  5. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  6. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  7. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  8. 认识CSS3新增选择器和样式

    前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器 结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的 ...

  9. 【CSS3】自定义滚动条样式 -webkit-scrollbar

    好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scroll ...

随机推荐

  1. WPF中得到一个控件相对其他控件的坐标

    加入想得到按钮btnTest左上角相对于主窗体winTest的坐标,可以用如下方法:btnTest.TranslatePoint(new Point(0, 0), winTest)这个方法返回一个Po ...

  2. CodeFirst迁移注意点

    Context构造函数不检查__MigrationHistory 取消当数据库模型发生改变时删除当前数据库重建新数据库的设置.Database.SetInitializer<Context> ...

  3. C# winform 窗体应用程序之图片上传Oracle数据库保存字段BLOB

    C# winform 窗体应用程序之图片上传Oracle数据库保存字段BLOB 我用的数据库是Oracle,就目前来看,许多数据库现在都倾向于Oracle数据库,对ORACLE数据库基本的操作也是必须 ...

  4. sqlserver插入之字符串+数字

    declare @i int,@a varchar(10)set @i = 0set @a='hiro--'+LTRIM(@i)while @i < 500begin insert into h ...

  5. 敏捷项目-依赖项拖动change

    1. 2.类方法插入数据.

  6. 对表单控制是否提交 需要在方法名前面加上 return

  7. 1. scrapy的安装

    1.安装lxml pip install lxml 2.安装twisted 在https://www.lfd.uci.edu/~gohlke/pythonlibs/#twisted网站搜索twiste ...

  8. git install

    wget -O git-master.zip https://codeload.github.com/git/git/zip/master unzip git-master.zip cd git-ma ...

  9. 关于finecms v5 会员头像 任意文件上传漏洞分析

    看到我私藏的一个洞被别人提交到补天拿奖金,所以我干脆在社区这里分享,给大家学习下 本文原创作者:常威,本文属i春秋原创奖励计划,未经许可禁止转载! 1.定位功能 下载源码在本地搭建起来后,正常登陆了用 ...

  10. 【zookeeper】Apache curator的使用及zk分布式锁实现

    上篇,本篇主要讲Apache开源的curator的使用,有了curator,利用Java对zookeeper的操作变得极度便捷. 其实在学之前我也有个疑虑,我为啥要学curator,撇开涨薪这些外在的 ...