BlogJava-Raven's Blog-随笔分类-JAVAScript http://www.blogjava.net/raven/category/8215.html向天空发誓，从此不再感情用事...zh-cnWed, 25 Apr 2007 19:21:50 GMTWed, 25 Apr 2007 19:21:50 GMT60自定义Select下拉框样式http://www.blogjava.net/raven/archive/2007/04/24/113066.htmlRavenRavenMon, 23 Apr 2007 16:53:00 GMThttp://www.blogjava.net/raven/archive/2007/04/24/113066.htmlhttp://www.blogjava.net/raven/comments/113066.htmlhttp://www.blogjava.net/raven/archive/2007/04/24/113066.html#Feedback0http://www.blogjava.net/raven/comments/commentRss/113066.htmlhttp://www.blogjava.net/raven/services/trackbacks/113066.html 

<script>
//完成下拉框选择时的模拟行为
function changeSelect(formV,toV){
    document.getElementById(toV).innerHTML = formV.options[formV.selectedIndex].text;
}

</script>
<style>
.sb {
    position:relative;
    height:20px;
>    height:24px;
    border: 1px solid #639;
    float:left;
    color:#000;
}
.sb .b {/*模拟下被切除的下拉框(select)*/
    position:absolute;
    height:22px;
    line-height:22px;
    padding:0 2px;
    overflow:hidden;
    white-space :nowrap;text-overflow:ellipsis;
    font-family:verdana;
    font-size:12px;
}
.sb select {
    position: absolute;
    top:0;
    right:0;
}

.w_50{/*以此来控制该下拉框的长度，可按需要添加多个长度Class，如w_100，w_200*/
    width:50px !important;
}
.w_50 select{/*根据长度切割默认下拉框*/
    width:50px;
    clip:rect(2px 48px 20px 32px);/*切除下拉框(select)内容区域，只保留下拉三角箭头*/
}
</style>

<div class="sb w_50">
    <div class="b" id="selectTest0">先生</div><!--模拟下拉框的列表显示区域-->
    <select name="RegAndLoginInPublishPage1:dpSex" id="RegAndLoginInPublishPage1_dpSex" onchange="changeSelect(this,'selectTest0')">
    <option selected="selected" value="44444">先生</option>
    <option value="55555">女士</option>
    </select>
</div>

代码没有优化，只想表现方法与思路。

Raven 2007-04-24 00:53 发表评论
]]>