셀렉트 박스(디자인)

css와 제이쿼리 사용하여 셀렉트 박스 디자인 변경하였습니다.

 

자세한 사용 방법은 아래 코드 확인 부탁드립니다.

 

더 좋은 방법이 있을 수 있지만 혹시 모르시는 분 있을까봐 공유드립니다.^^

 

<style type="text/css">
		.select_box { position:relative; width:178px; height:28px; border:1px solid #ddd; border-radius:3px; background:#fff url("img/select_arrow.png") 160px center no-repeat; }
		.select_box span.value { display:block; margin-left:10px; height:28px; line-height:28px; font-size:12px; color:#666; text-align:left; overflow:hidden; }
		.select_box select { position:absolute; left:0; top:0px; padding-left:5px; width:100%; height:28px;line-height:28px; font-size:12px; color:#666; text-align:left; border:0; background:#fff; opacity:0; filter:alpha(opacity=0); }
		</style>
		<!-- // 스타일 -->
		<div id="wrap">
			<div class="select_box">
				<span class="value"></span>
				<select name="" id="">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
				</select>
			</div>
		</div>
		<!-- // wrap -->

		<!-- 스크립트 -->
		<script type="text/javascript">
		$(".select_box select").on("change",function(){
			$(this).prev().html($(this).find("option:selected").text());
		}).prev().html(function() {
			return $(this).next().find("option:selected").text();
		});
		</script>
		<!-- // 스크립트 -->

 

혹시 내용이 도움 되었다면 유튜브 채널오셔서 다양한 정보 보시고 

구독과 좋아요 부탁드립니다. 

감사합니다. 



스톤모두 유튜브 무료 강의 : https://www.youtube.com/channel/UCZUPZrlC-A8u4Y8KbU0HUvQ?sub_confirmation=1 

스톤모두 네이버 스토어 : https://smartstore.naver.com/stonemodoo 

스톤모두 모두홈페이지 : https://stone.modoo.at/ 

스톤모두 워드프레스 홈페이지 : https://stonemodoo.com/