<select name="pets" id="pet-select"  class="box-select">
    <option value="">당신의 최애 프로그래밍 언어는?</option>
    <option value="python">Python</option>
    <option value="java">Java</option>
    <option value="javaScript">JavaScript</option>
    <option value="parrot">Parrot</option>
    <option value="C/C++">C/C++</option>
</select>

<!-- button과 ul,li로 셀렉트 박스 만들기 -->

<h2>셀렉트 박스 만들기</h2>
<button class="btn-select">당신의 최애 프로그래밍 언어는?</button>
<ul class="list-member">
    <li><button type="button">Python</button></li>
    <li><button type="button">Java</button></li>
    <li><button type="button">JavaScript</button></li>
    <li><button type="button">C/C++</button></li>
</ul>

ul,li{
  list-style: none;
  padding: 0;
  margin: 0;
}
button{
  border: none;
}

h2 {
    margin: 30px;
}

.btn-select, .box-select {
    width: 250px;
    height: 50px;
    padding: 15px;
    background: darkred;
    margin-left: 30px;
    color: #fff;
    text-align-last: left;
  line-height: 1;
}

.list-member {
    display: none;
    margin-left: 30px;
    width: 250px;
    height: 30px;
}

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

.btn-select:active+.list-member {
    display: block;
}

.list-member li {
    height: 30px;
    text-align-last: left;
    width: 250px;
}

.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:#eee;
}

 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.innerText = event.target.innerText;
            list.classList.remove('on');
        }
    });