滚动条样式代码,Css代码库,德仔网

代码语言
代码分类
【Css】滚动条样式
作者:Dezai.CN / 发布于2012/8/23/ 701
滚动条样式
<div>
<strong>去掉横向滚动条：</strong>
overflow-x: hidden;
<strong>滚动条样式：</strong>


1.带背景颜色的实线边框滚动条
<div><DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP:  black 2px solid;SCROLLBAR-FACE-COLOR: #006600; SCROLLBAR-HIGHLIGHT-COLOR:  #33cc33; OVERFLOW: auto; BORDER-LEFT: black 2px solid; WIDTH: 200px;  
SCROLLBAR-SHADOW-COLOR: #33cc33; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR:  
#33cc33; SCROLLBAR-ARROW-COLOR: #33cc33; BORDER-BOTTOM: black 2px solid;  SCROLLBAR-DARKSHADOW-COLOR: #33cc33; HEIGHT: 150px; BACKGROUND-COLOR: #ccffcc"  align=center>
<DIV align=left><FONT  color=#009900>文字</FONT></DIV></div>

2.无背景颜色的实线边框滚动条
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px  solid;
SCROLLBAR-FACE-COLOR: #ffa500; OVERFLOW: scroll; BORDER-LEFT: black  2px solid;
WIDTH: 200px; SCROLLBAR-SHADOW-COLOR: #ffd700; COLOR: #d2691e;  
SCROLLBAR-3DLIGHT-COLOR: #ff7f50; SCROLLBAR-ARROW-COLOR: #ff0000;  
BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT:  150px" align=center>文字</DIV>


3.无背景颜色的虚线边框滚动条
<div><DIV style="BORDER-RIGHT: #006c90 1pt dashed;  BORDER-TOP: #006c90 1pt dashed; 
SCROLLBAR-FACE-COLOR: #ffffff;  SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW:
auto; BORDER-LEFT:#006c90 1pt  dashed; WIDTH: 200px; SCROLLBAR-SHADOW-COLOR: 
COLOR:#000000 ;  SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR:
#006c90;  BORDER-BOTTOM: #006c90 1pt dashed; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT:  150px" align=left><FONT color=#0060c0 >文字</FONT></DIV></div>


4.无背景颜色的双线边框滚动条
<div><DIV style="BORDER-RIGHT: #fc48b4 double; BORDER-TOP:  #fc48b4 double; SCROLLBAR-FACE-COLOR: #fcd8fc; SCROLLBAR-HIGHLIGHT-COLOR:  #ffffff; OVERFLOW: auto; BORDER-LEFT: #fc48b4 double; WIDTH: 200px;  SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #d800b4;  SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #fc48b4 double;  SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 150px" align=left><FONT  color=#000000>文字</FONT></DIV></div>


5.无背景颜色的圆点边框滚动条
<DIV style="BORDER-RIGHT: #00b490 thick dotted; BORDER-TOP: #00b490 thick  dotted;
SCROLLBAR-FACE-COLOR: #fcfcfc; SCROLLBAR-HIGHLIGHT-COLOR: #fcfcfc;  OVERFLOW: auto; 
BORDER-LEFT: #00b490   thick dotted; WIDTH: 200px;  SCROLLBAR-3DLIGHT-COLOR: #fcfcfc; 
SCROLLBAR-ARROW-COLOR: #00b490;  SCROLLBAR-TRACK-COLOR: #fcfcfc; BORDER-BOTTOM:
#00b490 thick dotted;  SCROLLBAR-DARKSHADOW-COLOR: #fcfcfc; HEIGHT: 150px" align=left> 
<FONT  color=#000000>文字</FONT></DIV>


6.无背景颜色的外凸边框滚动条
<DIV style="BORDER-RIGHT: #b46cfc outset; BORDER-TOP: #b46cfc  outset;
SCROLLBAR-FACE-COLOR:#d8b4fc; SCROLLBAR-HIGHLIGHT-COLOR:  #d8b4fc;
OVERFLOW: auto; BORDER-LEFT: #b46cfc outset; WIDTH: 200px;  
SCROLLBAR-SHADOW-COLOR: #d8b4fc; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR:  
#d8b4fc; SCROLLBAR-ARROW-COLOR: #b424b4; BORDER-BOTTOM: #b46cfc  outset;
SCROLLBAR-DARKSHADOW-COLOR: #d8b4fc; HEIGHT: 150px"  align=center>
<FONT color=#000000>文字</FONT></DIV>


6.有背景颜色的浮出立体线框滚动条
<DIV style="BORDER-RIGHT:#fcb4d8 ridge; BORDER-TOP: 
#fcb4d8 ridge;  SCROLLBAR-FACE-COLOR: #fcb4d8; 
SCROLLBAR-HIGHLIGHT-COLOR: #fcb4d8; OVERFLOW:  auto; 
BORDER-LEFT: #fcb4d8 ridge; WIDTH: 200px;  SCROLLBAR-SHADOW-COLOR:
#fcb4d8; COLOR: #fcb4d8; SCROLLBAR-3DLIGHT-COLOR:  #fcb4d8; 
SCROLLBAR-ARROW-COLOR: #d82448; BORDER-BOTTOM: #fcb4d8  ridge;
SCROLLBAR-DARKSHADOW-COLOR: #fcb4d8; HEIGHT: 150px; BACKGROUND-COLOR:  
#fcb4d8" align=center><P align=left><FONT  color=#8000ff>文字</FONT></P></DIV>
</DIV></DIV>



<strong>去掉横向滚动条：</strong>
overflow-x: hidden;
<strong>滚动条样式：</strong>


1.带背景颜色的实线边框滚动条
<div><DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP:  black 2px solid;SCROLLBAR-FACE-COLOR: #006600; SCROLLBAR-HIGHLIGHT-COLOR:  #33cc33; OVERFLOW: auto; BORDER-LEFT: black 2px solid; WIDTH: 200px;  
SCROLLBAR-SHADOW-COLOR: #33cc33; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR:  
#33cc33; SCROLLBAR-ARROW-COLOR: #33cc33; BORDER-BOTTOM: black 2px solid;  SCROLLBAR-DARKSHADOW-COLOR: #33cc33; HEIGHT: 150px; BACKGROUND-COLOR: #ccffcc"  align=center>
<DIV align=left><FONT  color=#009900>文字</FONT></DIV></div>

2.无背景颜色的实线边框滚动条
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px  solid;
SCROLLBAR-FACE-COLOR: #ffa500; OVERFLOW: scroll; BORDER-LEFT: black  2px solid;
WIDTH: 200px; SCROLLBAR-SHADOW-COLOR: #ffd700; COLOR: #d2691e;  
SCROLLBAR-3DLIGHT-COLOR: #ff7f50; SCROLLBAR-ARROW-COLOR: #ff0000;  
BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT:  150px" align=center>文字</DIV>


3.无背景颜色的虚线边框滚动条
<div><DIV style="BORDER-RIGHT: #006c90 1pt dashed;  BORDER-TOP: #006c90 1pt dashed; 
SCROLLBAR-FACE-COLOR: #ffffff;  SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW:
auto; BORDER-LEFT:#006c90 1pt  dashed; WIDTH: 200px; SCROLLBAR-SHADOW-COLOR: 
COLOR:#000000 ;  SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR:
#006c90;  BORDER-BOTTOM: #006c90 1pt dashed; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT:  150px" align=left><FONT color=#0060c0 >文字</FONT></DIV></div>


4.无背景颜色的双线边框滚动条
<div><DIV style="BORDER-RIGHT: #fc48b4 double; BORDER-TOP:  #fc48b4 double; SCROLLBAR-FACE-COLOR: #fcd8fc; SCROLLBAR-HIGHLIGHT-COLOR:  #ffffff; OVERFLOW: auto; BORDER-LEFT: #fc48b4 double; WIDTH: 200px;  SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #d800b4;  SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #fc48b4 double;  SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 150px" align=left><FONT  color=#000000>文字</FONT></DIV></div>


5.无背景颜色的圆点边框滚动条
<DIV style="BORDER-RIGHT: #00b490 thick dotted; BORDER-TOP: #00b490 thick  dotted;
SCROLLBAR-FACE-COLOR: #fcfcfc; SCROLLBAR-HIGHLIGHT-COLOR: #fcfcfc;  OVERFLOW: auto; 
BORDER-LEFT: #00b490   thick dotted; WIDTH: 200px;  SCROLLBAR-3DLIGHT-COLOR: #fcfcfc; 
SCROLLBAR-ARROW-COLOR: #00b490;  SCROLLBAR-TRACK-COLOR: #fcfcfc; BORDER-BOTTOM:
#00b490 thick dotted;  SCROLLBAR-DARKSHADOW-COLOR: #fcfcfc; HEIGHT: 150px" align=left> 
<FONT  color=#000000>文字</FONT></DIV>


6.无背景颜色的外凸边框滚动条
<DIV style="BORDER-RIGHT: #b46cfc outset; BORDER-TOP: #b46cfc  outset;
SCROLLBAR-FACE-COLOR:#d8b4fc; SCROLLBAR-HIGHLIGHT-COLOR:  #d8b4fc;
OVERFLOW: auto; BORDER-LEFT: #b46cfc outset; WIDTH: 200px;  
SCROLLBAR-SHADOW-COLOR: #d8b4fc; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR:  
#d8b4fc; SCROLLBAR-ARROW-COLOR: #b424b4; BORDER-BOTTOM: #b46cfc  outset;
SCROLLBAR-DARKSHADOW-COLOR: #d8b4fc; HEIGHT: 150px"  align=center>
<FONT color=#000000>文字</FONT></DIV>


6.有背景颜色的浮出立体线框滚动条
<DIV style="BORDER-RIGHT:#fcb4d8 ridge; BORDER-TOP: 
#fcb4d8 ridge;  SCROLLBAR-FACE-COLOR: #fcb4d8; 
SCROLLBAR-HIGHLIGHT-COLOR: #fcb4d8; OVERFLOW:  auto; 
BORDER-LEFT: #fcb4d8 ridge; WIDTH: 200px;  SCROLLBAR-SHADOW-COLOR:
#fcb4d8; COLOR: #fcb4d8; SCROLLBAR-3DLIGHT-COLOR:  #fcb4d8; 
SCROLLBAR-ARROW-COLOR: #d82448; BORDER-BOTTOM: #fcb4d8  ridge;
SCROLLBAR-DARKSHADOW-COLOR: #fcb4d8; HEIGHT: 150px; BACKGROUND-COLOR:  
#fcb4d8" align=center><P align=left><FONT  color=#8000ff>文字</FONT></P></DIV>
</DIV></DIV>



1.xhtml下滚动条的颜色问题？
在原来的html的时候，我们可以这样定义整个页面的滚动条

body{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

但是同样的代码，我们应用在 xhtml下就不起作用了，我相信好多好朋友也遇到过同样的问题
那么怎么才能在xhtml下应用滚动条样式呢？看下列代码

html{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}
</div>
试试其它关键字
　滚动条样式　
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)