Jquery+css selectbox > 공책

본문 바로가기
010.6356.7610
  • design1001@naver.com
  • @design1001
작업물 전체보기

JQuery+JavaScript

JQuery+JavaScript Jquery+css selectbox

페이지 정보

  • 작성자후야
  • 조회 : 201
  • 작성일 : 2021-01-28 00:24

본문

CSS를 Jquery 이용한 Selectbox(셀렉트박스) 디자인

<style>
/* css */
.select {display:block;position:relative;width:100%;height:40px;line-height:40px;/*text-transform:uppercase;*/border:1px solid #ccc;background:#fff;}
.select label {display:block;position:absolute;top:0;left:0;width:100%;padding:0;color:#666;font-weight:300;line-height:40px;text-indent:10px;}
.select label:after{position:absolute;top:0;right:0;width:38px;height:38px;padding:0;content:'';font-size:13px;color:#444;text-align:center;background:url(../img/ico-select.png) no-repeat 50% 50% #fff;}
.select select {display:block;width:100%;height:40px;opacity:0;filter:alpha(opacity=0);-ms-filter:alpha(opacity=0)/* IE 8 */;}
</style>


/* html */
<span class="select" id="">
	<label for="selectbox">선택</label>
	<select name="selectbox" id="selectbox">
		<option value="">Html</option>
		<option value="">CSS</option>
		<option value="">Jquery</option>
		<option value="">PHP</option>
	</select>
</span>


<script>
/* script */
$(document).ready(function() {
	var select = $('.select select');
	select.change(function(){
		var select_name = $(this).children('option:selected').text();
		$(this).siblings("label").text(select_name);
	});

	var val = $("#셀렉트박스ID option:selected").text();
	$('.select select').siblings("label").text(val);
});
</script>