디자인 select

<style>
.__sel {display:inline-block;position:relative;}
.__sel > span {display:block;border:1px solid #ccc;padding:0 25px 0 5px;height:24px;line-height:22px;box-sizing:border-box;min-width:150px;position:relative;white-space:nowrap;}
.__sel > span:before {content:"\f107";position:absolute;right:10px;top:0;font-family:axicon;}
.__sel select {position:absolute;left:0;top:0;width:100%;height:100%;filter:alpha(opacity=0);opacity:0;z-index:10;}
.__sel:hover span,
.__sel select:focus + span {color:#000;border-color:#000;}
</style>

<div class="__sel">
	<select name="" id="">
		<option value="">선택하세요</option>
		<option value="">선택하세요1</option>
		<option value="">선택하세요2</option>
		<option value="">선택하세요3</option>
	</select>
	<span>선택하세요</span>
</div>

<script>
var sel = {
	init : function(){
		this.action();
	},
	action : function(){
		var a = $('.__sel');

		//처음 진입 시 셀렉트 되어 있는 값으로 변경 나중에 업데이트 할 때에도 사용
		a.each(function(i){
			var txt = $(this).find(':selected').text();
			$(this).find('span').text(txt);
		});

		//셀렉트 선택시 텍스트 변경 업데이트
		a.on('change','select',function(){
			var txt = $(this).find(':selected').text();
			$(this).closest(a).find('span').text(txt);
		});
	}
}
sel.init();
</script>