码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-03-15 11:36:05      阅读:368      评论:0      收藏:0      [点我收藏+]

标签:ace   url   display   overflow   ack   ble   round   无效   win   

 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;三角箭头的颜色 
11             scrollbar-face-color: #333; *立体滚动条的颜色
12             scrollbar-3dlight-color: #666; 立体滚动条亮边的颜色
13             scrollbar-highlight-color: #666; 滚动条空白部分的颜色
14             scrollbar-shadow-color: #999; 立体滚动条阴影的颜色 
15             scrollbar-darkshadow-color: #666; 立体滚动条强阴影的颜色 
16             scrollbar-track-color: #666; 立体滚动条背景颜色
17             scrollbar-base-color:#f8f8f8; 滚动条的基本颜色
18             Cursor:url(mouse.cur);自定义个性鼠标*/
19         }
20         div{
21             height:100px;
22             width:200px;
23             overflow:auto;
24         }
25         td{
26             display:inline-block;
27             margin:10px 20px;
28         }
29         /*webkit内核浏览器修改滚动条样式*/
30         ::-webkit-scrollbar {  
31             width: 8px;  
32         }  
33         ::-webkit-scrollbar-thumb {  
34             border-radius: 10px;  
35             background: rgba(0,0,0,0.2);   
36         }  
37         ::-moz-scrollbar {  
38             width: 8px;  
39         }  
40         ::-moz-scrollbar-thumb {  
41             border-radius: 10px;  
42             background: rgba(0,0,0,0.2);   
43         }  
44         /*当前窗口未激活的情况下*/ 
45         ::-webkit-scrollbar-thumb:window-inactive {  
46             background: rgba(0,0,0,0.1);   
47         }  
48         /*hover到滚动条上*/  
49         ::-webkit-scrollbar-thumb:vertical:hover{  
50             background-color: rgba(0,0,0,0.3);  
51         }  
52         /*滚动条按下*/  
53         ::-webkit-scrollbar-thumb:vertical:active{  
54             background-color: rgba(0,0,0,0.7);  
55         }  
56     </style>
57 </head>
58 <body>
59     <div>
60         <table>
61             <tr>
62                 <td>12345</td>
63                 <td>12345</td>
64             </tr>
65             <tr>
66                 <td>12345</td>
67                 <td>12345</td>
68             </tr>
69             <tr>
70                 <td>12345</td>
71                 <td>12345</td>
72             </tr>
73             <tr>
74                 <td>12345</td>
75                 <td>12345</td>
76             </tr>
77         </table>
78     </div>
79 </body>
80 </html>

如有错误,请您指正!

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

标签:ace   url   display   overflow   ack   ble   round   无效   win   

原文地址:http://www.cnblogs.com/ksl666/p/6553014.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!