Html
    Css
    Js

    
                        
*{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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.0.0
 立即下载

替换下拉控件(可控样式)

很多时候select下拉样式不能修改而发愁,不能对各种属性的不兼容去百度,搜索,这里可以帮到你,完全不用担心兼容问题,也不用担心返回值问题,显示值和绑定的code或id隐藏值的实现

1
      keefelu0
      2019/8/5 14:08:16
      我发表的代码竟然不能编辑和修改 回复