html select滚动条样式修改,如何定义Select下拉框的边框颜色和滚动条样式

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

(2012-11-07 15:00:25)

标签：

定义select下拉框

select定义css不显示

杂谈

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

解决思路：

Select下拉框的边框颜色和滚动条的样式都是无法直接定义的，但可以用层模拟出来。

具体步骤：

方法一：只定义下拉框边框样式。

value="http://www.flash8.net">闪客之吧

value="http://www.blueidea.com">蓝色理想

value="http://www.5d.cn">5D多媒体

value="http://www.csdn.net">CSDN

MSDN

方法二：定义边框和滚动条样式(通过用层来模拟实现)。

function showHide(obj){ //隐现层的函数

sh={block:"none",none:"block"}

//层的display属性值在"block"和"none"间不断轮换，

//达到轮换隐藏和显示的效果

oOption.runtimeStyle.display=sh[oOption.currentStyle.display]

}

obj=event.srcElement

if(obj.tagName=="TD"){//判断onmouseover事件是否发生在单元格上

//设置事件发生所在的单元格的背景颜色

obj.style.backgroundColor="#dedede"

//设置事件发生所在的单元格的字体颜色

obj.style.color="#FFFFFF"

}

obj=event.srcElement

if(obj.tagName=="TD"){ //判断onmouseout事件是否发生在单元格上

//设置事件发生所在的单元格的背景颜色

obj.style.backgroundColor="#FFFFFF"

obj.style.color="#000000"//设置事件发生所在的单元格的字体颜色

}

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) //测试跳转菜单功能

}

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

}

cellpadding="0">

style="border-collapse:collapse;cursor:default"

οnclick="showHide()">

id="C_Select">

id="oSelect">下拉选项

align="center" width="14">

style="font-family: Webdings;colro:#CACAB7"

οnmοuseοver="this.className=’over’"

οnmοuseοut="this.className=’out’">6

onselectstart="return false">

width="100%">

value="http://www.flash8.net">闪吧

value="http://www.blueidea.com">经典

value="http://www.5d.cn">5D

value="http://www.sina.com">新浪

value="http://www.sohu.cn">搜狐

value="http://www.163.com">网易

value="http://www.etang.com">亿唐

注意：定义滚动条样式的效果需要IE5.5+的支持。

特别提示

两种方法的代码运行效果分别如图1.4.18、图1.4.19所示。

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

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

特别说明

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

分享：

喜欢

0

赠金笔

加载中，请稍候......

评论加载中，请稍候...

发评论

登录名： 密码： 找回密码 注册记住登录状态

昵   称：

评论并转载此博文

发评论

以上网友发言只代表其个人观点，不代表新浪网的观点或立场。