*{margin:0;padding:0;}
html,body,div,span,ol,ul,li,dl,dt,dd{
margin:0;padding:0;
}
ol,ul,li,dl,dt,dd{
list-style-type:none;
}
.selectBox{
position:relative;
width:200px;
margin:30px auto;
line-height:100%;
}
.boxTxt{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAIAAADgN5EjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAACkSURBVHjaYlywYAED6eDr168sDAwMAQEBpOqsrKxkYiAXDF2du3Idp97FqXJXbu4u3HaerzbGrnlXrkDYYgKuxaIZizY0nW6TP6yKRdcM0xa76sNkNzx2omnGqY2BgYEFwxVukz+c1XA0rj5fbSzAwIBDG65YUc7ef7bVEJ82rHYiNDNMvZud7YYrllhwR7VydrbysEy3pAGWr1+/VlZWkqETMAB0IETspx6jPQAAAABJRU5ErkJggg==) no-repeat center right #fff;
background-size:21px 20px;
padding-right:21px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-khtml-box-sizing:border-box;
-ms-box-sizing:border-box;
border: solid 1px #eee;
width:100%;
height:24px;
line-height:22px;
text-indent:5px;
cursor:pointer;
}
.boxVal{
/* display:none; */
position:absolute;
margin-left:220px;
height:24px;
line-height:22px;
text-indent:5px;
width:100%;
top:0;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-khtml-box-sizing:border-box;
-ms-box-sizing:border-box;
}
.selectBox>ul{
position:absolute;
left:0;
margin-top:-1px;
width:100%;
background:#fff;
display:none;
z-index:999999;
}
.selectBox>ul>li{
padding:5px;
border:solid 1px #eee;
border-top:none;
line-height:1;
cursor:pointer;
}
.selectBox>ul>li.selected{
background:#f4fcff;
}很多时候select下拉样式不能修改而发愁,不能对各种属性的不兼容去百度,搜索,这里可以帮到你,完全不用担心兼容问题,也不用担心返回值问题,显示值和绑定的code或id隐藏值的实现