select option 커스텀

위 gif 와 같이 select option을 커스텀하여 제작해보자.

<div class="selectBox">
        <button class="label">fruits</button>
        <ul class="optionList">
            <li class="optionItem">fruits</li>
            <li class="optionItem">apple</li>
            <li class="optionItem">orange</li>
            <li class="optionItem">grape</li>
            <li class="optionItem">melon</li>
        </ul>
    </div>

    <a href="#javscript:;" class="confBtn">확인</a>

  * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .selectBox {
        position: relative;
        width: 400px;
        height: 35px;
        text-align: center;
    }

    .selectBox .label {
        padding:20px 0;
        color:#fff;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: inherit;
        height: inherit;
        outline: none;
        border: 0;
        background-color: rgb(143, 35, 35);
    }

    .selectBox .optionList {
        display: none;
        position: absolute;
        left: 0;
        top: 40px;
        width: 100%;
        background-color: lightcoral;
        color: #fff;
    }

    .selectBox.active .optionList {
        display: block;
    }

    .selectBox .optionItem {
        cursor: pointer;
        padding: 10px;
    }

    .selectBox .optionItem:hover {
        background: rgb(175, 93, 93);
    }
    .confBtn {display: inline-block; margin-top:50px; text-decoration: none; padding:20px 70px; background-color: rgb(81, 82, 83); color:#fff; border-radius: 30px;}

const label = document.querySelector('.label');
        const confBtn = document.querySelector('.confBtn');
        const options = document.querySelectorAll('.optionItem');

        // 클릭한 옵션의 텍스트를 라벨 안에 넣음
        const handleSelect = (item) => {
            label.parentNode.classList.remove('active');
            label.innerHTML = item.textContent;
            if(item.textContent == 'fruits'){
                confBtn.style.backgroundColor = 'rgb(81, 82, 83)';
                }else{
                    confBtn.style.backgroundColor = 'dodgerblue';
                }
        }
        // 옵션 클릭시 클릭한 옵션을 넘김
        options.forEach(option => {
            option.addEventListener('click', () => {
                handleSelect(option);
            })
        })

        // 라벨을 클릭시 옵션 목록이 열림/닫힘
        label.addEventListener('click', () => {
            if (label.parentNode.classList.contains('active')) {
                label.parentNode.classList.remove('active');
            } else {
                label.parentNode.classList.add('active');
            }
        })

forEach 문을 활용하여 option을 선택해주고 option의 text를 handleSelect 의 매개변수로 label에 넣어주는 방식으로 작업하였으며, text값의 따라 확인버튼의 컬러를 바꿔주는 기능도 넣어보았다.