19'C 흐림
서울 강남구
간단하게 만들어보는 Select Box, IE8 에서도 동일한 효과를 줄 수 있다.
예제 링크 : http://cheolguso.com/preview/select/select.html
HTML
<div id="select_box">
<label for="color">color</label>
<select id="color" title="select color">
<option selected="selected">color</option>
<option>red</option>
<option>blue</option>
<option>yellow</option>
<option>black</option>
</select>
</div>
CSS
div#select_box {
position: relative;
width: 200px;
height: 40px;
background: url(select_arrow.png) 180px center no-repeat; /* 화살표 이미지 */
border: 1px solid #E9DDDD;
}
div#select_box label {
position: absolute;
font-size: 14px;
color: #a97228;
top: 13px;
left: 12px;
letter-spacing: 1px;
}
div#select_box select#color {
width: 100%;
height: 40px;
min-height: 40px;
line-height: 40px;
padding: 0 10px;
opacity: 0;
filter: alpha(opacity=0); /* IE 8 */
}
JAVASCRIPT
jQuery(document).ready(function(){
var select = $("select#color");
select.change(function(){
var select_name = $(this).children("option:selected").text();
$(this).siblings("label").text(select_name);
});
});