<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>
代碼沒有優化，只想表現方法與思路。
posted on 2007-04-24 00:53
Raven 閱讀(30772)
評論(6) 編輯 收藏 所屬分類:
JAVAScript 、
XHTML/CSS