Select와 Option으로 사용 시 스타일링의 어려움이 있기 때문에 아래와 같이 ul 과 li로 구성 하였습니다.
HTML
<div class="dropdown">
<div class="dropdown-selected">Select an option</div>
<ul class="dropdown-options">
<li data-value="1">Option 1</li>
<li data-value="2">Option 2</li>
<li data-value="3">Option 3</li>
<li data-value="4">Option 4</li>
</ul>
</div>
CSS (SASS)
.dropdown {
position: relative;
width: 250px;
/* 선택된 항목 표시 */
.dropdown-selected {
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
cursor: pointer;
font-size: 16px;
color: #333;
}
/* 화살표 표시 */
.dropdown-selected::after {
content: "▼";
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
font-size: 12px;
color: #333;
}
/* 옵션 목록 */
.dropdown-options {
display: block;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
border: 1px solid #ccc;
background-color: #fff;
z-index: 100;
border-radius: 4px;
max-height: 150px;
overflow-y: auto;
&.show {
display: show;
}
/* 옵션 항목 */
li {
padding: 10px;
cursor: pointer;
/* 호버 및 선택된 항목 스타일 */
&:hover{
background-color: #007bff;
color: #fff;
}
&.selected{
background-color: #007bff;
color: #fff;
}
}
}
}
아래는 참고용으로 Vue로 Select Option을 제대로 이벤트 동작하게끔 하기 위해 정리합니다.
Vue
<div class="dropdown" ref="dropdown">
<div class="dropdown-selected" @click="toggleDropdown">Select an option</div>
<ul class="dropdown-options" v-if="isOpen">
<li data-value="1" @click="selectOption(1)">Option 1</li>
<li data-value="2" @click="selectOption(2)">Option 2</li>
<li data-value="3" @click="selectOption(3)">Option 3</li>
<li data-value="4" @click="selectOption(4)">Option 4</li>
</ul>
</div>
export default{
data() {
return {
isOpen:false
}
},
methods: {
toggleDropdown() {
this.isOpen = !this.isOpen;
},
selectOption(option) {
this.selectedText = option.text;
this.isOpen = false;
},
handleClickOutside(event) {
// dropdown 외부 클릭 시 드롭다운 닫기
if (!this.$refs.dropdown.contains(event.target)) {
this.isOpen = false;
}
}
},
mounted() {
document.addEventListener('click', this.handleClickOutside);
},
beforeDestroy() {
document.removeEventListener('click', this.handleClickOutside);
},
}
