[jQuery] 디자인 셀렉트 박스 & CSS

<style type="text/css">
.eventWrap div.inNumber{margin-bottom:30px;}
.eventWrap div.inNumber:after{content:'';display:block;clear:both;}
.eventWrap div.inNumber input{float:left;width:616px;height:73px;line-height:73px;margin-right:20px;padding:0;border:1px solid #cfcfcf;background:#f2f2f2;text-align:center;color:#444343;font-size:24px;}
.eventWrap div.inNumber div.selectbox {float:left;position: relative;width: 277px;height:73px;line-height:73px;border: 1px solid #cfcfcf;background:#fbfbfb url('./images/sel_off.gif') no-repeat 219px 50%;;z-index: 1;font-size:24px;}
.eventWrap div.inNumber div.selectbox label{position: absolute; top: 1px;left: 30px;width:243px;height:73px;line-height:73px; color: #999;z-index: -1;}
.eventWrap div.inNumber div.selectbox select {width: 100%;height:73px;line-height:73px;font-family: inherit;border: 0;opacity: 0;filter:alpha(opacity=0);-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.eventWrap .smsPoint{width:912px;padding:105px 0 32px 0;margin-bottom:20px;border:3px solid #f92828;background:url('./images/tit_point_save.gif') no-repeat 0 0;}
.eventWrap .smsPoint .txtSms{text-align:center;font-size:18px;line-height:26px;margin-bottom:26px;}
.eventWrap .smsPoint .smsChk{position:relative;text-align:center;}
.eventWrap .smsPoint .smsChk label{display:inline-block;padding:0 0 0 44px;height:33px;line-height:33px;font-size:25px;color:#000;background:url('./images/bg_checkbox.png') no-repeat 0 0;}
.eventWrap .smsPoint .smsChk label.on{background-position:0 100%;}
.eventWrap .smsPoint .smsChk input{position:absolute;top:0px;left:0px;width:315px;height:33px;opacity: 0;filter:alpha(opacity=0);}
</style>

<div class="inNumber">
<input type="text" id="inNumber" name="" value="인증번호 8자리 입력(-제외)" />
<div class="selectbox">
<label for="labelSel">적립 받을 달 선택</label>
<select id="labelSel">
<option>적립 받을 달 선택</option>
<option>12월</option>
<option>11월</option>
<option>10월</option>
<option>9월</option>
<option>8월</option>
</select>
</div>
</div>

<div class="smsPoint">
<p class="txtSms">고객님이 잊지 않으시도록 선택하신 달에 고객님께 적립금 지급을 알려드립니다. <br />SMS 수신동의를 해주시기 바랍니다.</p>
<p class="smsChk">
<label for="smsAgree">SMS 안내받기 (수신동의)</label>
<input type="checkbox" id="smsAgree" class="inCheck" />
</p>
</div>
<p class="btnC mb55"><a href="#"><img src="./images/btn_point_save.gif" alt="적립금 받기" /></a></p>

<script type="text/javascript">
$(document).ready(function() {
$('#inNumber').on('focus', function(){
$(this).val('');
});
var selectTarget = $('.selectbox select');
selectTarget.change(function(){
var select_name = $(this).children('option:selected').text();
$(this).siblings('label').text(select_name);
});

$('.smsChk input').on('click', function(){
var $this = $(this).parent().find('label');
if($('#smsAgree').is(':checked')){
$this.addClass('on');
//console.log(0);
//console.log($('#smsAgree').is(':checked'));
} else {
$this.removeClass('on');
//console.log(1);
//console.log($('#smsAgree').is(':checked'));
}
});

});
</script>

출처 : http://webdir.tistory.com/432