博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

网页滚动条样式

Posted on 2009-03-16 16:43  ^_^木头人  阅读(271)  评论(0)    收藏  举报

网页滚动条样式


应用：

没有水平滚动条
<body style="overflow-y:scroll;overflow-x:hidden;">

没有垂直滚动条
style="overflow-y:hidden"

没有滚动条
style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden"

2．自己定义滚动条的颜色

scrollbar-3d-light-color 立体滚动条亮边的颜色
scrollbar-arrow-color 上下按钮上三角箭头的颜色
scrollbar-base-color 滚动条的基本颜色
scrollbar-dark-shadow-color 立体滚动条强阴影的颜色
scrollbar-face-color 立体滚动条凸出部分的颜色
scrollbar-highlight-color 滚动条空白部分的颜色
scrollbar-shadow-color 立体滚动条阴影的颜色

应用实例：

定义窗口滚动条的颜色(IE5.5+)：

代码:
BODY {
scrollbar-face-color: #C5D5FC; 全局颜色
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #C5D5FC;
scrollbar-darkshadow-color: #7C9FD3;
scrollbar-track-color: #FFFFFF;   滚动条下面颜色
scrollbar-arrow-color: #4D6185;   三角型颜色
}


设置多行文本框的颜色：

代码:
<textarea style="scrollbar-face-color: #C5D5FC;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #C5D5FC;
scrollbar-darkshadow-color: #7C9FD3;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #4D6185;">

…………

</textarea>


以上2项适用与<body>、<div>、<textarea>、<iframe>等