select box를 제이쿼리로 외형제어

 

HTML

 

 

<div id="select_box">
<label for="year">2017</label>
   <select name="year" id="year">
    <option value="2017년" selected="selected">2017</option>
    <option value="2018년">2018</option>
    <option value="2019년">2019</option>
   </select>
   </div><span>년</span>
   <div id="select_box">
   <label for="month">1</label>
   <select name="month" id="month">
    <option value="1월"  selected="selected">1</option>
    <option value="2월">2</option>
    <option value="3월">3</option>
   </select>
   </div>
   <span>월</span>
   <div id="select_box">
   <label for="date">1</label>
   <select name="date" id="date">
     <option value="1일" selected="selected">1</option>
    <option value="2일">2</option>
    <option value="3일">3</option>
   </select></div><span>일</span>
   <div id="select_box">
   <label for="time1">10</label>
  <select name="time1" id="time1">
    <option value="10시" selected="selected">10</option>
    <option value="11시">11</option>
    <option value="11시">12</option>
  </select>
  </div>
 <span>시</span>
  <div id="select_box">
  <label for="time2">00</label>
  <select name="time2" id="time2">
    <option value="00분" selected="selected">00</option>
    <option value="10분">10</option>
    <option value="20분">20</option>
    <option value="30분">30</option>
    <option value="40분">40</option>
    <option value="50분">50</option>
  </select>
  </div>
  <span>분</span>

 

CSS

 

#select_box{
 float: left;
 position: relative;
 height: 25px;
  min-width: 80px;
  border: 1px solid #929292;
  background: url(../images/arrow.png) no-repeat 60px center;
   margin-left: 8px;
}
f#select_box label{
 position: absolute;
 font-size: 15px;
 top: 5px; left: 10px;
}
span{
 float: left;
 margin-left: 8px;
}
select{
  height: 25px;
  min-width: 80px;
  border: 1px solid #929292;
  font-size: 14px;
  font-family: nGothic;
  color: #4c4c4c;
  opacity: 0;
}

 

 

Javascrip

 

 var select = $("form select");
  
     select.change(function(){
         var select_name = $(this).children("option:selected").text();
         $(this).siblings("label").text(select_name);
     });

 

간단하고 예쁘게 변경할수 있다 :)