Khi phát triển giao diện web, các thành phần mặc định như select, input, hay radio thường không đáp ứng được yêu cầu về thẩm mỹ. Việc tìm kiếm template bên ngoài đôi khi gây phiền toái do bắt đăng ký hoặc quét mã. Dưới đây là hướng dẫn tùy chỉnh dropdown theo hai cách phổ biến.

Hiệu ứng thực tế

Người dùng thường muốn xem trước kết quả trước khi tích hợp vào dự án. Vì vậy, dưới đây là hai phiên bản dropdown đã được tùy chỉnh:

Phiên bản 1: Sử dụng div + ul

<div class="dropdown-container">
    <span class="dropdown-trigger">Chọn mục</span>
    <div class="dropdown-arrow">&#8250;</div>
    <ul class="dropdown-list">
        <li>Mục 1</li>
        <li>Mục 2</li>
        <li>Mục 3</li>
    </ul>
</div>

Phiên bản 2: Dùng thẻ select (giới hạn style option)

<select class="styled-select">
    <option value="">-- Chọn --</option>
    <option value="1">Mục A</option>
    <option value="2">Mục B</option>
    <option value="3">Mục C</option>
</select>

Lưu ý: Với thẻ select, bạn không thể tùy chỉnh CSS cho các option bên trong — đây là giới hạn của trình duyệt.

Mã nguồn đầy đủ

Đoạn mã sau yêu cầu jQuery để xử lý sự kiện tương tác. Hãy đảm bảo thay đường dẫn đến file jQuery phù hợp.

<style>
.dropdown-container {
    width: 220px;
    height: 40px;
    border: 1px solid #4a90e2;
    position: relative;
    display: inline-block;
    margin-right: 30px;
}

.dropdown-trigger {
    display: block;
    height: 40px;
    line-height: 40px;
    padding-left: 12px;
    cursor: pointer;
    user-select: none;
}

.dropdown-active {
    color: #d9534f;
}

.dropdown-list {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    border: 1px solid #4a90e2;
    background: white;
    display: none;
    z-index: 10;
}

.dropdown-list li {
    padding: 0 12px;
    line-height: 38px;
    cursor: pointer;
}

.dropdown-list li:hover {
    background: #4a90e2;
    color: white;
}

.dropdown-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 22px;
    color: #4a90e2;
    pointer-events: none;
}

.styled-select {
    width: 220px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #4a90e2;
    appearance: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234a90e2"><polygon points="0,0 16,0 8,12"/></svg>') no-repeat right 12px center;
}
</style>

<div class="dropdown-container">
    <span class="dropdown-trigger">Mục 1</span>
    <div class="dropdown-arrow">&#8250;</div>
    <ul class="dropdown-list">
        <li>Mục 1</li>
        <li>Mục 2</li>
        <li>Mục 3</li>
    </ul>
</div>

<select class="styled-select">
    <option value="">-- Chọn --</option>
    <option value="1">Mục A</option>
    <option value="2">Mục B</option>
    <option value="3">Mục C</option>
</select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
    const trigger = $('.dropdown-trigger');
    const items = $('.dropdown-list li');

    trigger.on('click', function(e) {
        $(this).toggleClass('dropdown-active');
        $(this).siblings('.dropdown-list').toggle();
        e.stopPropagation();
    });

    items.on('click', function() {
        const text = $(this).text();
        const parentTrigger = $(this).closest('.dropdown-container').find('.dropdown-trigger');
        parentTrigger.text(text).removeClass('dropdown-active');
        $(this).parent().hide();
    });

    $(document).on('click', function() {
        trigger.removeClass('dropdown-active');
        $('.dropdown-list').hide();
    });
});
</script>