JS / selectBox custom하기

셀렉트박스를 커스텀해보았다.

처음엔 w3스쿨스에서 긁어다가 적용해보려했는데 개뿔 더 거지같다 알아보기도힘들고 ㅋㅋ

그냥 만들어보기로 결심!

select 태그를 쓰지않고 만들어 보았다.

 

1. value를 담아줄 인풋 생성

2. option을 list태그로 생성

3. 옵션을 선택하면 값을 input에 전달 

 

인풋을 두개 만들어 직접입력 칸까지 만들어 보았다.

// email로 예제를 만들어 보았다.
// list에 data-select에 value를 넣어준뒤 선택되면 인풋에 값으로 넘겨준다.

<div class="select_custom_wrap" id="emailSelect">
    <div class="form_item w160">
        <label for="test05" class="i_label"></label>
        <input type="text" name="" id="test05" class="i_text select_target">
    </div>
    <div class="select_input form_item w160">
        <input type="text" name="" value="" placeholder="직접입력" readonly>
        <button class="select_btn"><img src="img/select_btn_arrow.svg" alt=""></button>
        <ul class="select_list scrollbar_custom w160">
            <li class="dirct_select" data-select="직접입력">직접입력</li>
            <li class="select_item" data-select="naver.com">naver.com</li>
            <li class="select_item" data-select="google.com">google.com</li>
            <li class="select_item" data-select="daum.com">daum.com</li>
            <li class="select_item" data-select="nate.com">nate.com</li>
            <li class="select_item" data-select="kkkkkkkkkkkkkkkkkkkkkkkk.com">kkkkkkkkkkkkkkkkkkkkkkkk.com</li>
            <li class="select_item" data-select="aaa.com">aaa.com</li>
            <li class="select_item" data-select="aaa.com">aaa.com</li>
            <li class="select_item" data-select="aaa.com">aaa.com</li>
            <li class="select_item" data-select="aaa.com">aaa.com</li>
            <li class="select_item" data-select="aaa.com">aaa.com</li>
            <li class="select_item" data-select="aaa.com">aaa.com</li>
            <li class="select_item" data-select="aaa.com">aaa.com</li>
            <li class="select_item" data-select="aaa.com">aaa.com</li>
            <li class="select_item" data-select="aaa.com">aaa.com</li>
            <li class="select_item" data-select="aaa.com">aaa.com</li>
        </ul>
    </div>
</div>

 

2.scrollbar커스텀,hover효과,...처리까지 해주었다.

/*셀렉트 커스텀*/
.select_custom_wrap{position: relative; z-index: 9;}
.select_custom_wrap .select_input{position: relative;}
.select_custom_wrap .select_input input{height: 40px; border: 1px solid #D6DBE1; border-radius: 8px; cursor: pointer; padding-right: 30px;}
.select_custom_wrap .select_input .select_btn{display: inline-block; position: absolute; top: 10px; right: 5px;}
.select_custom_wrap .select_input .select_btn.on img{transform: rotate(180deg);}
.select_custom_wrap .select_list{display: none; position: absolute; top: 30px; left: 0; right: 0; height: 180px; padding-top: 12px; padding-bottom:5px; background-color: #fff; z-index: -1; border: 1px solid #C8CBCF; border-radius: 0 0 8px 8px; overflow: hidden; border-top: none; overflow-y: overlay; }
.select_custom_wrap .select_list li{line-height: 16px; height: 24px; font-size: 12px; padding:2px 8px; background-color: #fff; color: #C8CBCF; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: background-color 0.2s, color 0.2s;}
.select_custom_wrap .select_list li:hover{background-color: #F8F9FC; color: #666;}
.select_custom_wrap .select_target{margin-right: 8px;}

/* 스크롤 바 커스텀 */
.scrollbar_custom::-webkit-scrollbar {width: 18px;}
.scrollbar_custom::-webkit-scrollbar-track {border-radius: 10px;}
.scrollbar_custom::-webkit-scrollbar-thumb {background-color: #bcc5db; border-radius: 10px; border: 7px solid #fff; }

3. 뭔가 반복되는 코드도 많은거같고..지저분..다음번에는 코드량을 조금 더 줄여보도록 해야겠다.

// dircetEvt 직접입력 클릭시 select_target초기화 
        function dircetEvt(){
            $('.dirct_select').on('click',function(){
                selecetId = $(this).parents('div.select_custom_wrap').attr("id");
                let curValue = $(this).attr('data-select');
                
                $('#'+selecetId).find('.select_input input').val(curValue);
                $('#'+selecetId).find('.select_target').focus();
                $('#'+selecetId).find('.select_target').attr("readonly",false);
                $('#'+selecetId).find('.select_target').val("");
                $('#'+selecetId).find('.select_target').attr("value","");
                listClose();
            });
        }
        // 옵션클릭시 값 입력 및 리드온리
        function selectEvt(){
            $('.select_item').on('click', function(){
                selecetId = $(this).parents('div.select_custom_wrap').attr("id");
                let curValue = $(this).attr('data-select');
                $('#'+selecetId).find('.select_input').find('input').val(curValue);

                $('#'+selecetId).find('.select_target').attr("value",curValue);
                $('#'+selecetId).find('.select_target').attr("readonly",true);
                $('#'+selecetId).find('.select_target').val(curValue);
                listClose();
            });
        }
        // 셀렉트 슬라이드
        function slideEvt(){
            $(".select_input input,.select_btn").on('click',function(){
                selecetId = $(this).parents('div.select_custom_wrap').attr("id");
                if($('#'+selecetId).find('.select_list').hasClass('on')){
                    $('#'+selecetId).find('.select_list').stop().slideUp();
                    $('#'+selecetId).find('.select_list').removeClass('on');
                    $('#'+selecetId).find('.select_btn').removeClass('on');
                }else{
                    $('#'+selecetId).find('.select_list').stop().slideDown();
                    $('#'+selecetId).find('.select_list').addClass('on');
                    $('#'+selecetId).find('.select_btn').addClass('on');
                }
            });
        }
        // 셀렉트 리스트 닫힘
        function listClose(){
            $('.select_list').stop().slideUp();
            $('.select_list').removeClass('on');
            $('.select_btn').removeClass('on');
        }