定义Select下拉框样式 select下拉框选项样式

方法一:只定义下拉框边框样式。
<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;
定义Select下拉框样式 select下拉框选项样式
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>

  

爱华网本文地址 » http://www.aihuau.com/a/25101013/172009.html

更多阅读

dota单机怎么选多个英雄 gta5取回车子

dota单机怎么选多个英雄——简介本文是应求助写的,主要简单讨论一下DOTA中用于测试的几个主要的单机命令,这其中就包括选择多个英雄的命令。dota单机怎么选多个英雄——方法/步骤dota单机怎么选多个英雄 1、首先在魔兽的单人模式的自

金庸群侠传3的攻略 金庸群侠传3攻略

??? 金庸群侠传系列非常受玩家的喜欢,然而,金庸群侠传系列游戏内容实在过于丰富,有很多玩家都不知道怎么样才能玩转金庸群侠传系列游戏。所以,为玩家准备了金庸群侠传系列游戏攻略,希望对玩家有所帮助。金庸群侠传3攻略:【建立角色篇】

新itunes怎么更新软件 itunes64怎么更新软件

新itunes怎么更新软件——简介新版的ituens在界面和操作上都做了很大的更新,不过很多界面、操作都无法直观地找到,今天就和大家分享下新itunes怎么更新软件,希望对大家有帮助。新itunes怎么更新软件——itunes应用程序更新新itunes怎

网卡高级设置 无盘客户机网卡设置

网卡高级设置——简介网卡设备正常,网卡驱动程序匹配,网络线路畅通,也能联网,就是会莫名地断网。此时不妨关注一下网卡设备的高级设置,看是否有设置不当的地方?修改网卡高级设置。网卡高级设置——方法/步骤网卡高级设置 1、Flow Control

CorelPainter12工作区介绍 corelpainter12破解版

1. 菜单栏可让您使用下拉菜单选项访问工具和功能2. “画笔选择器”栏可让您打开“画笔库”面板来选择画笔类别和变体。此外,它还可以让您打开和管理画笔库。3.属性栏显示与活动工具或对象有关的命令。例如,当“填充”工具处于活动状态

声明:《定义Select下拉框样式 select下拉框选项样式》为网友午後夏天分享!如侵犯到您的合法权益请联系我们删除