`
jiasongmao
  • 浏览: 680757 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

定义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" 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
分享到:
评论

相关推荐

    jQuery Select下拉框美化代码

    这里包含了定义下拉框外观的关键样式,如颜色、字体、边框、背景、滚动条样式等。例如: ```css .select-wrapper { width: 200px; background-color: #f0f8ff; /* 绿色清新的背景色 */ } .select-wrapper select...

    select下拉滚动条

    select::-webkit-scrollbar { /* Webkit内核的滚动条样式 */ width: 8px; /* 滚动条宽度 */ } select::-webkit-scrollbar-thumb { /* 滚动条滑块样式 */ background: #ccc; } ``` 注意,滚动条样式的兼容性...

    基于jquery实现下拉框美化特效

    在CSS文件中定义了下拉框及其选项的样式,包括颜色、边框、悬停效果等。在HTML结构中,需要包含一个原生的select元素和若干个div元素,div元素用于触发和展示美化后的下拉效果,而select元素则作为模拟下拉框的数据...

    jQuery Select下拉框美化特效特效代码

    1. **CSS样式定制**:为了实现绿色清新风格,开发者会使用CSS来定义Select元素的背景色、字体颜色、边框样式等,甚至创建自定义的下拉箭头图标。此外,滚动条的样式也会被调整,使其与整体设计保持一致。 2. **...

    bootstrap-select-1.13.0-dev.rar

    5. **自定义样式**:Bootstrap Select与Bootstrap框架兼容,因此可以利用Bootstrap的类和样式来自定义下拉框的外观,如颜色、大小、边框等。 6. **事件处理**:该插件提供了一系列的事件,如`shown.bs.select`...

    《程序天下:JavaScript实例自学手册》光盘源码

    6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 ...

    程序天下:JavaScript实例自学手册

    6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 ...

    JS 日历控件(蓝色)

    `.selectBox` 类则用于下拉框,具有滚动条和自定义的滚动条样式,这在用户选择日期范围时非常有用。 4. **JavaScript 功能**:虽然没有提供具体的JavaScript代码,但日历控件通常会包含JavaScript功能,如显示和...

Global site tag (gtag.js) - Google Analytics