现在我打开支持前缀-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. JS里关于特殊字符的转义

    重定向的url里含有百分号“%”,遇到了apache 找不到该文件的报错.通过查询相关文档,知道了原来是url里含有特殊字符要转码才能定位到正确的地址.比如"%"要转码为" ...

  2. python——排序

    从学校毕业出来后只知道冒泡排序,发现自己对排序的了解还是很浅显. 于是在网上搜索各种排序方法,以下是本人根据索搜出来的资料再结合自己理解作出的一些简单的阐述. 如果有不正确的地方欢迎大家指正.(共同学 ...

  3. 打开SQL2008R2配置工具，提示远程调用失败[0x800706be]

    卸载了Microsoft SQL Server 2012 Express LocalDB,依然不行. 再卸载Microsoft SQL Server 2014 LocalDB,此时右边显示框已可以显示 ...

  4. MvcPager分页控件使用注意事项！

    初学MVC,做了个单页面应用,需要显示多个分页,并无刷新更新. 找到了MvcPager控件,非常好用,在使用ajax过程中遇到很多问题.慢慢调试和杨老师(MvcPaegr作者)请教,总于都解决了. 首 ...

  5. day 82 Django Admin组件.

    一.先建表环境 modules文件 from django.db import models # Create your models here. from django.contrib.auth.m ...

  6. Linux下安装python虚拟环境(virtualenv,vritulaenvwrapper)

    一.virtualenv virtualenv是如何创建"独立"的Python运行环境的呢? 原理很简单,就是把系统Python复制一份到virtualenv的环境,用命令sour ...

  7. Memoization-329. Longest Increasing Path in a Matrix

    Given an integer matrix, find the length of the longest increasing path. From each cell, you can eit ...

  8. Git进行fork后如何与原仓库同步

    在进行Git协同开发的时候,往往会去fork一个仓库到自己的Git中,过一段时间以后,原仓库可能会有各种提交以及修改,很可惜,Git本身并没有自动进行同步的机制,这个需要手动去执行.name如何进行自 ...

  9. iOS---UICollectlionView 的使用

    UICollectlionView继承自UIScrollerview,跟tableview的使用很相似. 下面是UIcollectionView的一些属性和代理方法. #import "Vi ...

  10. centos7搭建kafka集群-第一篇

    Kafka初识 1.Kafka使用背景 在我们大量使用分布式数据库.分布式计算集群的时候,是否会遇到这样的一些问题: 我们想分析下用户行为(pageviews),以便我们设计出更好的广告位 我想对用户 ...