IE webkit 滚动条样式!

<style type="text/css">        // IE 模式
        *{
            scrollbar-face-color:#F3F3F3; /*面子*/
            scrollbar-arrow-color:#C0C0C0; /*箭头*/
            scrollbar-3dlight-color:#C0C0C0; /*最外左*/
            scrollbar-highlight-color:#FFFFFF; /*左二*/
            scrollbar-shadow-color:#FFFFFF; /*右二*/
            scrollbar-darkshadow-color:#C0C0C0; /*右一*/
            scrollbar-track-color:#F3F3F3; /*滑道*/
        }
        /*滚动条整体*/  

    //  webkit 模式
        ::-webkit-scrollbar{
            width:14px; /*滚动条宽度*/
        }
        /*滚动条按钮*/
        ::-webkit-scrollbar-button {  

        }
        ::-webkit-scrollbar-track{
            background-color:#F3F3F3;  /*滑道全部*/
        }
        ::-webkit-scrollbar-track-piece{
            background-color:#F3F3F3;  /*滑道*/
            -webkit-border-radius:4px; /*滑道圆角宽度*/
        }
        ::-webkit-scrollbar-thumb{
            background-color:#F3F3F3; /*滑动条表面*/
            border:solid 1px #C0C0C0; /*滑动条边框*/
            border-radius:4px;  /*滑动条圆角宽度*/
        }
        /*横竖滚动条交角*/
        ::-webkit-scrollbar-corner {
            background-color: #F3F3F3;
        }
        /*横竖滚动条交角图案*/
        ::-webkit-resizer {
            /*background-image: url(/public/img/resizer-inactive.png);*/
           background-repeat: no-repeat;
           background-position: bottom right;
       }
       /*鼠标滑过滑动条*/
        ::-webkit-scrollbar-thumb:hover{
            background-color:#F3F3E0;
        }
    </style>  
时间: 2024-10-05 23:19:08

IE webkit 滚动条样式!的相关文章

webkit滚动条样式设置

::-webkit-scrollbar { width: 12px;} /* Track */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;} /* Handle */::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; bord

自定义滚动条样式

<style> /* * 控制ie 滚动条颜色 * scrollbar-face-color 滚动条颜色 */ div{ scrollbar-face-color: #DDDDDD; scrollbar-shadow-color: #DDDDDD; scrollbar-highlight-color: #DDDDDD; scrollbar-3dlight-color: #DDDDDD; scrollbar-darkshadow-color: #FFFFFF; scrollbar-base-co

overflow滚动条样式设置,ie和webkit内核

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <style> 8 body{ 9 /*ie下修改滚动条样式,在webkit内核浏览器无效*/ 10 /*scrollbar-arrow-color: #f4ae21;三角箭头的颜色

网页滚动条样式知识

今天老板指出我做的网页的不足,说滚动条可以美化一下,我一听还有点纳闷,滚动条还可以变吗,第一次听说.后来去百度了下,果真有这方面东东,于是应用下来. webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. ::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条

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

好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scrollbar.html webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-t

CSS自定义滚动条样式

相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下.当然,兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏览器一直没有支持,IE独孤求败了. 这些样式规则很简单: scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立

CSS3自定义滚动条样式 之 -webkit-scrollbar

有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. 演示 来看看这2个滚动条demo:demo1(图片版).demo2(纯CSS3版) 滚动条组成 ::-webkit-scroll

CSS3自定义滚动条样式 -webkit-scrollbar (一)

Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条的组成: ::-webkit-scrollbar         滚动条整体部分  ::-webkit-scrollbar-thumb             滚动条里面的小方块,能上下左右移动(取决于是垂直滚动条还是水平滚动条)  ::-webkit-scrollbar-track      滚动条的轨道(里面装有thumb)  ::-w

css scrollbar 滚动条样式

chrome, webkit浏览器下(IE另外) 核心 ::-webkit-scrollbar{}/* 整体样式 */ ::-webkit-scrollbar-track{}/* 轨道 */ ::-webkit-scrollbar-thumb{}/* 滑块 */ ::-webkit-scrollbar-button{}/* 两端小方块 */ ::-webkit-scrollbar-track-piece{}/* 不包含滑块的轨道区 */ ::-webkit-scrollbar-corner{}/