[jQuery] 셀렉트박스(selectbox) 꾸미기

select 를 꾸미는 건 쉽지 않다.

브라우저마다 css 값도 다르게 적용되어 지고 제한되는 부분도 많이 때문에 

원하는 디자인 변경이 불가한 경우도 있다.

기존의 select 를 꾸며주는 플러그인들이 많지만 접근성을 해치는 방식으로 꾸며주기 다반사다.

select를 커스터마이징 해줄 때 다음과같이 이용한다.

HTML

<div class="select-box select-script">
    <label for="selectbox">선택해 주세요</label>
    <select id="selectbox" title="선택 구분">
        <option selected="selected">선택해 주세요</option>
        <option>선택1</option>
        <option>선택2</option>
        <option>선택3</option>
        <option>선택4</option>
    </select>
</div>
 

CSS

.select-script{position:relative; width:200px; height:40px; line-height:40px; border:1px solid #606976; border-radius:4px; text-transform:uppercase; background:#fff;}
.select-script label{position:absolute; width:90%; font-size:.86em; color:#606976; top:0; left:0; padding:0 5%;}
.select-script label:after{content:'▼'; width:40px; height:40px; position:absolute; top:0; right:0; font-size:.76em; color:#fff; text-align:center; background:#606976;}
.select-script select{width:100%; height:40px; opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0)/* IE 8 */;}
 

JAVASCRIPT

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

간단하게 설명하자면

select를 label에 for와 id 로 연결하여 

label을 클릭하면 select 가 작동하게 하였고

select는 투명하게 opacity 값을 주어 label과 div로 꾸며 주었습니다.

아래 첨부파일 참고하여주세요. 사용하셔도 좋습니다. ^^

셀렉트 박스 꾸미기.zip