css selectbox + xe-icon > 공책

<style>
/* select */
.select {display:block;position:relative;width:100%;height:40px;border:solid 1px #ddd;}
.select select {display:block;width:100%;height:38px;line-height:38px;text-indent:10px;border:none;outline:0;}
.select select:focus {border:none !important;}
.select select {-o-appearance: none;-webkit-appearance: none;-moz-appearance: none;appearance:none;}
.select select option {display:block;padding:10px;border:solid 1px #ddd;}
.select:after {content:"\e941";display:block;position:absolute;right:0px;top:0px;width:38px;height:38px;font-family:"xeicon";font-size:12px;text-align:center;line-height:38px;background:none;z-index:9;cursor:pointer;
-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;
}
.select.on:after {color:#ff7700;
-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg);
}
</style>


<span class="select">
<select name="sido" id="sido" required>
	<option value="">시/도</option>
</select>
</span>


<script>
$(document).ready(function() {	
	$(".select").on("click", function() {
		$(this).toggleClass("on");
		return false;
	});

	$(".select").focusout(function() {
		$(this).removeClass("on");
		return false;
	});
});
</script>