select下拉样式重置（html+css+jquery）

HTML(一定要引用jquery才可以哦)

	
	
        

            
                商品状态
                上架
                下架
            
        
    	
    
    
	

CSS

.form-select{position:relative;}
.i-select{display:none;}
.form-select .sel-edge{position: absolute;  right: 10px;  top: 50%;  margin-top: -3px;  cursor: pointer;  border-width: 6px;  border-top-color: #c2c2c2;  border-top-style: solid;  transition: all .3s;  -webkit-transition: all .3s;}
.form-selected .sel-edge{margin-top: -9px; -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.sel-edge{display: inline-block; width: 0; height: 0; border-width: 6px; border-style: dashed;  border-color: transparent; overflow: hidden; vertical-align: middle;}
.sel-input{border-color: #e6e6e6;display: block; width: 100%; padding-left: 10px;}
.form-select .sel-input{ cursor: pointer;}
.sel-input{height: 38px; line-height:38px; border:1px solid #e6e6e6;  background-color: #fff;  border-radius: 2px;}
.sel-input:hover{border-color: #D2D2D2!important;}

.form-select.form-selected dl{display: block;}
.form-selectup dl{top: auto; bottom: 42px;}
.form-select dl{display: none; position: absolute; left: 0; top: 35px; padding: 5px 0; z-index: 899; min-width: 100%;  border: 1px solid #d2d2d2;  max-height: 300px; overflow-y: auto; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12); box-sizing: border-box;}
.form-select dl dd{cursor: pointer; padding: 0 10px; line-height: 36px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; margin:0}
.form-select dl dd:hover{background-color: #f2f2f2;}
.form-select dl dd.select-tips{padding-left: 10px!important; color: #999;}
.form-select dl dd.select_checked{background-color: #5FB878; color: #fff;}

JS（my.js）

$().ready(function(e) {
	selectFun();
});
function selectFun(){	
	$(document).on("click",".select-title",function(e){
		$(".form-select").removeClass("form-selected");
		$(this).parent().toggleClass("form-selected");
	});		
	$(document).on("click",".form-select dl dd",function(){
		var classN  = $(this).attr("class");
		var val  = $(this).attr("data-val");
		var text  = $(this).text();
		var input = $(this).parent().prev(".select-title").find("input");
		var ind = $(this).index();
		if(val == ""){
			input.val("");
		}else{
			input.val(text);
		}
		$(this).addClass("select_checked").siblings().removeClass("select_checked");
		$(this).closest(".form-select").toggleClass("form-selected");
		//同步select的值
		$(this).parents(".form-select").prev().children("option").removeAttr("selected");
		$(this).parents(".form-select").prev().children("option").eq(ind).attr("selected","selected");
	});
	
	$(document).mouseup(function(e){
		var _con = $(".form-select");
		if(!_con.is(e.target) && _con.has(e.target).length === 0){
			$(".form-select").removeClass("form-selected");
		}
	});
	$(".i-select").each(function(index, element) {
		var opt = {};
		var selectOpt = []
		var checked_txt = "";
		var placeholder = "";
		
		$(this).children("option").each(function(index, element) {				
			opt[$(this).text()] = $(this).val();
			var text = $(this).text();				
			var value = $(this).val();
			var checked = false;
			
			if($(this).attr("selected")){
				checked = true;				
				if(value == ""){
					checked_txt = "";
				}else{
					checked_txt = text;	
				}
			}
			selectOpt.push(
				{
					text: text,
					value: value,
					selected: checked
				}
			)
			if(index==0){//获取placeholder文字
				placeholder = $(this).text();	
			}
		});
		//循环
		var optList = "";
		$.each(selectOpt, function(index, val) {
			if(index==0){
				optList =  optList +'
'+val.text+'
'
			}else{
				if(val.selected){
					optList =  optList +'
'+val.text+'
';
				}else{
					optList =  optList +'
'+val.text+'
'
				}
			}
		});
		$(".i-select").parent().append('
\
			  
\
				  \
				  \
			  
\
			  
'+optList+'
\
		  
');
	});
}