css+jquery를 이용한 셀렉트박스 > 공책

<style>
/* select */
.select {display:block;position:relative;width:30%;height:40px;line-height:40px;/*text-transform:uppercase;*/border:1px solid #ccc;background:#fff;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
.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/icon_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>


<?php if ($is_category) { ?>
<div class="bo_w_select write_div">
	<span class="label">분류<strong class="sound_only">필수</strong></span>
	<span class="select">
	<label for="ca_name"><?php if($write['ca_name']) { echo $write['ca_name']; } else { echo '카테고리선택'; } ?></label>
	<select name="ca_name" id="ca_name" required>
		<option value="">분류를 선택하세요</option>
		<?php echo $category_option ?>
	</select>
	</span>
</div>
<?php } ?>


<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);
		});

		<?php if($u && $is_category) { ?>
		var val = $("#ca_name:selected").text();
		$('.select select').siblings("label").text(val);
		<?php } ?>
	});
</script>