*{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隐藏值的实现