custom selectBox

기본 selectbox 보면 디폴트 화살표가 나와 있는걸 볼 수 있다.

이 디폴트 화살표를 숨기고 커스텀하는 방법을 알아 보겠다.

 

select box를 커스텀 하기 위해서는 다양한 방법이 있지만 그중에서

나는 기존 selectbox를 숨기고 다른 태그를 이용해 스타일을 지정한 다음 이용해서 선택된 selectbox의  값을 텍스트로 출력하는 방식을 사용해보겠다.

이방식이 좋은 이유는 ie 하위 브라우저도 지원이 가능하다.

 

html

---

<div class="selectWrap">
  <div class="selectInner">
    <div class="selectBox">
      <label for="select">1</label>
      <select class="select" id="select">
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
  	</div>
  </div>
</div>

---

css

---

.selectWrap .selectBox {z-index: 1; position: relative; width: 100%; width: 300px; margin: 0 auto; height: 23px; line-height: 23px; background: #fff url("http://kimc159.cafe24.com/test/select/bg_bottom_arrow.jpg") no-repeat 95% 50%;} 
.selectWrap .selectBox label {z-index: -1; position: absolute; top: 0px; left: 0; padding: 0 20px 0 10px; width: 100%; height: 23px; line-height: 23px; color: #363636; font-size: 13px; font-weight: 300; letter-spacing: -0.5px; -webkit-box-sizing: border-box; box-sizing: border-box;border: 1px solid #ddd;} 
.selectWrap .selectBox .select {vertical-align: top; width: 100%; height: 23px; line-height: 23px; font-family: inherit; opacity: 0; /*ie9 이하 화살표 숨김*/filter:alpha(opacity=0); -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #363636; font-size: 13px; font-weight: 300; letter-spacing: -0.5px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.selectWrap .selectBox .select option{text-align: center; padding: 0 20px 0 10px;}

---

label 태그를 position:absolute로 띄우고 z-index:-1;을 줘서 뒤로 가게 한 다음

기존 selectbox의 opacity:0을 주게 되면 화면에는 보이지 않지만 영역은 남아 있어서 클릭 이벤트가 가능하다.

그래서 실제로는 label태그를 보고 있지만 클릭하는 순간 숨겨져 있는 select box의 클릭 이벤트가 작동하게 되서 select 목록이 띄게 되는 원리이다.

여기서 주의할 점은 선택된 option 값들을 label에다가 넣어주는 추가 스크립트 작업이 필요하다.

 

js

---

$(function() {
	changeCombo();
});
// 콤보 변경 처리
function changeCombo() {
	var select_target = $('.selectBox .select');
	select_target.change(function(e){
		var $this = $(this);
		var select_name = $("#" + $this.attr("id") + " option:selected").text();
		$this.siblings('label').text(select_name);
	});
}

---

 

완성소스