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

　　 如何定义Select下拉框的边框颜色和滚动条样式
解决思路：
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" οnclick="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" οnmοuseοver="this.className=’over’" οnmοuseοut="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+的支持。
特别提示
两种方法的代码运行效果分别如图1.4.18、图1.4.19所示。

图1.4.18 改变下拉框的边框样式

图1.4.19 用层模拟的下拉框效果

特别说明

方法一通过用CSS对象的clip属性设置下拉框的剪切范围，以隐藏下拉框的原边框，然后定义下拉框父元素的边框作为下拉框的边框；而方法二就完全摒弃原来的下拉框控件，用层来模拟一个，当然，要完全一样的效果是不可能的，只能是把一些很显明的特殊模拟出来。本例涉及到的知识点比较多，但在这里不作详细讲解，在第二部分和第三部分会有专门的讲解。

 http://www2.flash8.net/teach/4124.htm

http://www.flydream.cn/cms/html/webkaifa/javascript/2006/1214/420.html

Select下拉框的边框颜色和滚动条样式

来源： 作者： 发布时间：2006-12-14

<script language="javascript" src="/cms/runcode.js" type="text/javascript"></script> <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" οnclick="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" οnmοuseοver="this.className=’over’" οnmοuseοut="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"><a href="http://www.flash8.net" _fcksavedurl="http://www.flash8.net">闪吧</a></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>     [提示：你可先修改部分代码，再按运行]