如何定义Select下拉框的边框颜色和滚动条样式

下面是从网上搜的，记录一下....

方法一：只定义下拉框边框样式。

< span  style ="position:absolute;border:1px solid #000000;width:80;height:20" >  
< select  style ="position:absolute;clip:rect(2 80 20 2);margin:-2;width:84;background:#eeeeee" >  
< option  value ="http://www.flash8.net" > 闪客之吧 </ option >  
< option  value ="http://www.blueidea.com" > 蓝色理想 </ option >  
< option  value ="http://www.5d.cn" > 5D多媒体 </ option >  
< option  value ="http://www.csdn.net" > CSDN </ option >  
< option  value =" http://msdn.microsoft.com/" > MSDN </ option >  
</ select >  
</ span >  

方法二：定义边框和滚动条样式(通过用层来模拟实现)。

< script > ...  
function showHide(obj)...{ //隐现层的函数 
sh=...{block:"none",none:"block"} 
//层的display属性值在"block"和"none"间不断轮换， 
//达到轮换隐藏和显示的效果 
oOption.runtimeStyle.display=sh[oOption.currentStyle.display] } 
</ script >  

<!-- 鼠标移上id为oOption的对象时执行本段代码 -->  
< script  event ="onmouseover"  for ="oOption" > ...  
obj=event.srcElement 
if(obj.tagName=="TD")...{//判断onmouseover事件是否发生在单元格上 
//设置事件发生所在的单元格的背景颜色 
obj.style.backgroundColor="#dedede" 
//设置事件发生所在的单元格的字体颜色 
obj.style.color="#FFFFFF" 
} 
</ script >  

<!-- 鼠标从id为oOption的对象上移开时执行本段代码 -->  
< script  event ="onmouseout"  for ="oOption" > ...  
obj=event.srcElement 
if(obj.tagName=="TD")...{ //判断onmouseout事件是否发生在单元格上 
//设置事件发生所在的单元格的背景颜色 
obj.style.backgroundColor="#FFFFFF" 
obj.style.color="#000000"//设置事件发生所在的单元格的字体颜色 
} 
</ script >  

<!-- id为oOption的对象被单击时执行本段代码 -->  
< script  event ="onclick"  for ="oOption" > ...  
obj=event.srcElement 
if(obj.tagName=="TD")...{ //判断onmouseover事件是否发生在单元格上 
showHide() //隐藏层 
//设置id为oSelect的对象内的文本为被点击的单元格内的文本 
oSelect.innerText=obj.innerText 
//设置id为C_Select的对象内的值为被点击的 
//单元格的自定义属性value的值 
C_Select.value=obj.value 
//window.open(obj.value) //测试跳转菜单功能 
} 
</ script >  
< style > ...  
body,td{...}{font-size:12px} 
.over{...}{color:#dedede} 
.out{...}{color:#333333} 
#oOption{...}{ 
scrollbar-face-color:#FFFFFF; 
scrollbar-shadow-color:#C1C1BB; 
scrollbar-highlight-color:#C1C1BB; 
scrollbar-3dlight-color:#EBEBE4; 
scrollbar-darkshadow-color:#EBEBE4; 
scrollbar-track-color:#F4F4F0; 
scrollbar-arrow-color:#CACAB7; 
position:absolute;display:none;width:75px;height:80px; 
overflow:scroll;overflow-x:hidden; 
border:#333333 1px solid;border-top:none;cursor:default 
} 
</ style >  
< table  width ="75"  border ="0"  cellspacing ="0"  cellpadding ="0" >  
< tr >< td >  
< table  width ="100%"  bordercolor ="#666666"  border =1  style ="border-collapse:collapse;cursor:default"  onclick ="showHide()" >  
< tr >  
< td  align ="center" >  
< input  type ="hidden"  name ="C_Select"  id ="C_Select" >  
< span  id ="oSelect" > 下拉选项 </ span ></ td >< td  align ="center"  width ="14" >< span  style ="font-family: Webdings;colro:#CACAB7"  onmouseover ="this.className=’over’"  onmouseout ="this.className=’out’" > 6 </ span ></ td >  
</ tr >  
</ table >  
</ td >  
</ tr >  
< tr >  
< td >< div  id ="oOption"  onselectstart ="return false" >  
< table  cellsapcing ="0"  cellspadding ="3"  border ="0"  width ="100%" >  
< tr >< td  value ="http://www.flash8.net" > 闪吧 </ td ></ tr >  
< tr >< td  value ="http://www.blueidea.com" > 经典 </ td ></ tr >  
< tr >< td  value ="http://www.5d.cn" > 5D </ td ></ tr >  
< tr >< td  value ="http://www.sina.com" > 新浪 </ td ></ tr >  
< tr >< td  value ="http://www.sohu.cn" > 搜狐 </ td ></ tr >  
< tr >< td  value ="http://www.163.com" > 网易 </ td ></ tr >  
< tr >< td  value ="http://www.etang.com" > 亿唐 </ td ></ tr >  
</ table >  
</ div ></ td >  
</ tr >  
</ table >  

注意：定义滚动条样式的效果需要IE5.5+的支持。
方法一通过用CSS对象的clip属性设置下拉框的剪切范围，以隐藏下拉框的原边框，然后定义下拉框父元素的边框作为下拉框的边框；而方法二就完全摒弃原来的下拉框控件，用层来模拟一个，当然，要完全一样的效果是不可能的，只能是把一些很显明的特殊模拟出来。