自定义Select下拉框样式

自定义Select下拉框样式

 

< 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 >

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