<aside> 💡 꼭 한 번씩 실습을 해보시길 권해드립니다!

</aside>

1. 커스텀 input, select 박스

디자인적인 개성을 주기 위해 실무에서는 input 요소나 select 박스를 브라우저 스타일과 다르게 표현하곤 합니다.

1.1 개념

스타일링이 까다로운 input 요소를 화면에서 숨기고 label 요소를 연결하여 스타일링을 진행합니다.

1.2 input checkbox 커스텀

아래 이미지를 통해 실습해보도록 하겠습니다.

images.zip

1.3 select 커스텀

select 박스의 경우 역시 스타일이 까다롭기 때문에 차라리 해당 요소를 사용하지 않는 방향으로 제작이 진행됩니다.

<h2>셀렉트 박스 만들기</h2>
<button class="btn-select">당신의 에스파 최애 맴버는??</button>
<ul class="list-member">
    <li><button type="button">카리나</button></li>
    <li><button type="button">지젤</button></li>
    <li><button type="button">닝닝</button></li>
    <li><button type="button">윈터</button></li>
</ul>

<script>
    const btn = document.querySelector('.btn-select');
    const list = document.querySelector('.list-member');
    btn.addEventListener('click', () => {
        list.classList.toggle('on');
    });
    list.addEventListener('click', (event) => {
        if (event.target.nodeName === "BUTTON") {
            btn.textContent = event.target.textContent;
            list.classList.remove('on');
        }
    });
</script>

/* 직접 셀렉트 박스 만들기 */
h2 {
    margin: 30px;
}

.btn-select {
    width: 200px;
    height: 30px;
    background: purple;
    color: #fff;
}

.list-member {
    display: none;
    width: 200px;
    height: 30px;
}

.list-member.on {
    display: block;
}

.list-member li {
    height: 30px;
    width: 200px;
}

.list-member li button {
    display: block;
    height: 100%;
    width: 100%;
    background-color: #fff;
    border: 1px solid black;
    border-top: none;
}

.list-member li button:hover {
    background-color: bisque;
}