Select 박스 커스텀이 귀찮아서 div로 Select Box 만들어 버리기

select 박스를 사용하려고 할때 커스텀하는게 귀찮아졌다 그래서 div로 select 박스를 만들고 있는데 나중에 까먹을까봐 미리미리 기록하기

 

<div id="select-wrap">
  <div id="select" class="select">제목</div>
  <ul id="ul" class="select-ul">
      <li>제목</li>
      <li>내용</li>
      <li>글쓴이</li>
  </ul>
</div>

 

.select{
    width: fit-content;
    background: #FFFFFF url("../public/img/icon/select-box-row.png") no-repeat scroll;
    border: 1px solid #b8b8b8;
    overflow: hidden;
    font-size: 18px;
    color: #666666;
    padding: 10px 0 10px 18px;
    width: 155px;
}
.select-ul{
    list-style-type: none;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 18px;
    color: #666666;
    border: 1px solid #b8b8b8;
    display: none;
    position: absolute;
    background: #FFFFFF;
    border-top: none;
}
.select-ul li{
	padding: 10px 0 10px 18px;
    width: 155px;
}

 

/* 셀렉트박스 보이게 하기 */
$("body").on("click", "#select", function () {
    $("#consultation-state-ul").toggle();
})

/* 셀렉트 박스 옵션 선택 */
$("body").on("click", "#ul li", function () {
    var text = $(this).html();
    $("#consultation-state-select").html(text);
    $("#consultation-state-ul").toggle();
})

/* 셀렉트 박스 이외 선택시 보이지 않게 하기 */
$("body").on("click", function(e){
	if($(".select-ul").css("display") == "block"){
    	if($("#select-wrap").has(e.target).length == 0){
        	$(".select-ul").hide()
        }
    }

})

 

select 태그를 사용했을때 보다 더 이쁘게 나오는걸 볼수있다.