[HTML] Select Option 스타일링

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);
    },    
}