爱华网方法一：只定义下拉框边框样式。
<span>
<select>
<optionvalue="#">zzzzz</option>
</select>
</span>
方法二：定义边框和滚动条样式(通过用层来模拟实现)。
<script>
functionshowHide(obj){//隐现层的函数
sh={block:"none",none:"block"}
//层的display属性值在"block"和"none"间不断轮换，//达到轮换隐藏和显示的效果
oOption.runtimeStyle.display=sh[oOption.currentStyle.display]}
</script>
<!--鼠标移上id为oOption的对象时执行本段代码-->
<scriptevent="onmouseover"for="oOption">
obj=event.srcElement
if(obj.tagName=="TD"){//判断onmouseover事件是否发生在单元格上
//设置事件发生所在的单元格的背景颜色
obj.style.backgroundColor="#dedede"
//设置事件发生所在的单元格的字体颜色
obj.style.color="#FFFFFF"
}
</script>
<!--鼠标从id为oOption的对象上移开时执行本段代码-->
<scriptevent="onmouseout"for="oOption">
obj=event.srcElement
if(obj.tagName=="TD"){//判断onmouseout事件是否发生在单元格上
//设置事件发生所在的单元格的背景颜色
obj.style.backgroundColor="#FFFFFF"
obj.style.color="#000000"//设置事件发生所在的单元格的字体颜色
}
</script>
<!--id为oOption的对象被单击时执行本段代码-->
<scriptevent="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:#3333331pxsolid;border-top:none;cursor:default
}
</style>
<tablewidth="75"border="0"cellspacing="0"cellpadding="0">
<tr><td>
<tablewidth="100%"bordercolor="#666666"border=1onclick="showHide()">
<tr>
<tdalign="center">
<inputtype="hidden"name="C_Select"id="C_Select">
<spanid="oSelect">下拉选项</span></td><tdalign="center"width="14"><spanonmouseover="this.className=’over’"onmouseout="this.className=’out’">6</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><divid="oOption"onselectstart="returnfalse">
<tablecellsapcing="0"cellspadding="3"border="0"width="100%">
<tr><tdvalue="#">1</td></tr>
<tr><tdvalue="#">2</td></tr>
<tr><tdvalue="#">3</td></tr>
<tr><tdvalue="#">4</td></tr>
<tr><tdvalue="#">5</td></tr>
<tr><tdvalue="#">6</td></tr>
<tr><tdvalue="#">7</td></tr>
</table>
</div></td>
</tr>
</table>
特别说明
方法一通过用CSS对象的clip属性设置下拉框的剪切范围，以隐藏下拉框的原边框，然后定义下拉框父元素的边框作为下拉框的边框；而方法二就完全摒弃原来的下拉框控件，用层来模拟一个，当然，要完全一样的效果是不可能的，只能是把一些很显明的特殊模拟出来。
.box{border:1pxsolid#C0C0C0;width:122px;height:20px;clip:rect(0px,121px,20px,0px);overflow:hidden;}
.box2{border:1pxsolid#F4F4F4;width:120px;height:18px;clip:rect(0px,119px,18px,0px);overflow:hidden;}
select{position:relative;left:-2px;top:-2px;width:123px;line-height:14px;color:#909993;border-style:none;border-width:0px;}
<divname="">
<optionvalue="">
</select>
</div></div>
