select option 버튼으로 커스텀 하기

커스텀 select box를 만든 계기

select option 코드를 스크립트로 생성한 후 option의 폰트를 변경하기 위해 구글링을 해서 찾아봤지만 option의 폰트를 바꾸기 위한 글은 찾을 수 없었고 select option 스타일을 변경하여 ul, li 코드를 이용해 셀렉트 박스를 만든 사례가 더 많았다. 그래서 나도 셀렉트 박스의 디자인을 변경하기 위해 다른 분들의 코드들을 보고 코드를 변경해보았다.

HTML 코드

    <div class="league_season">
        <button type="button" class="selectbox-btn">시즌 선택</button>
        <ul class="selectbox-option">
            <script>
                let season = 2013;
                let seasonList = [];
                let today = new Date();
                let year = today.getFullYear();
                for (let i = 0; i < 12; i++) {
                    seasonList.push(season + i);
                }
                seasonList.forEach((item) => {
                    document.write(`<li><button type="button" class="option-btn">${item}</button></li>`);
                });
            </script>
        </ul>
    </div>

CSS 코드

.league_season{
    position: relative;
    width: 150px;
    margin: 10px 20px 10px 10px;
    float: right;
}

.selectbox-btn {
    width: 150px;
    padding: 13px 30px 13px 14px;
    font-size: 22px;
    line-height: 14px;
    background-color: #fff;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    background: url("../images/select-down_img.png") center right 10px no-repeat;
    background-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.selectbox-option{
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.selectbox-btn.on {
    background: url("../images/select-up_img.png") center right 10px no-repeat;
    background-size: 14px;
}

.selectbox-btn.on+.selectbox-option {
    display: block;
}

.selectbox-btn li {
    height: 40px;
    padding: 5px 8px;
    box-sizing: border-box;
}

.option-btn{
    width: 100%;
    padding: 10px;
    border: none;
    font-size: 22px;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    /* 말줄임 */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.option-btn:hover, .option-btn:focus{
    background-color: #e4f1ff;
}

JS 코드

const btn = document.querySelector('.selectbox-btn');
const list = document.querySelector('.selectbox-option');

btn.addEventListener('click', () => {
    btn.classList.toggle('on');
});

list.addEventListener('click', (event) => {
    if (event.target.nodeName === "BUTTON") {
        btn.innerText = event.target.innerText;
        btn.classList.remove('on');
    }
});

window.addEventListener('click', (event) => { 
    if (!btn.contains(event.target)) {
        btn.classList.remove('on');
    }
});