解决思路:
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属性设置下拉框的剪切范围,以隐藏下拉框的原边框,然后定义下拉框父元素的边框作为下拉框的边框;而方法二就完全摒弃原来的下拉框控件,用层来模拟一个,当然,要完全一样的效果是不可能的,只能是把一些很显明的特殊模拟出来。
转载地址:http://hi.baidu.com/zrq202/blog/item/581b73c44298ccac8226ac83.html
分享到:
相关推荐
这里包含了定义下拉框外观的关键样式,如颜色、字体、边框、背景、滚动条样式等。例如: ```css .select-wrapper { width: 200px; background-color: #f0f8ff; /* 绿色清新的背景色 */ } .select-wrapper select...
select::-webkit-scrollbar { /* Webkit内核的滚动条样式 */ width: 8px; /* 滚动条宽度 */ } select::-webkit-scrollbar-thumb { /* 滚动条滑块样式 */ background: #ccc; } ``` 注意,滚动条样式的兼容性...
在CSS文件中定义了下拉框及其选项的样式,包括颜色、边框、悬停效果等。在HTML结构中,需要包含一个原生的select元素和若干个div元素,div元素用于触发和展示美化后的下拉效果,而select元素则作为模拟下拉框的数据...
1. **CSS样式定制**:为了实现绿色清新风格,开发者会使用CSS来定义Select元素的背景色、字体颜色、边框样式等,甚至创建自定义的下拉箭头图标。此外,滚动条的样式也会被调整,使其与整体设计保持一致。 2. **...
5. **自定义样式**:Bootstrap Select与Bootstrap框架兼容,因此可以利用Bootstrap的类和样式来自定义下拉框的外观,如颜色、大小、边框等。 6. **事件处理**:该插件提供了一系列的事件,如`shown.bs.select`...
6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 ...
6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 ...
`.selectBox` 类则用于下拉框,具有滚动条和自定义的滚动条样式,这在用户选择日期范围时非常有用。 4. **JavaScript 功能**:虽然没有提供具体的JavaScript代码,但日历控件通常会包含JavaScript功能,如显示和...