Hướng dẫn bootstrap multiselect css - css đa lựa chọn bootstrap

HTML cung cấp một cách gốc để tạo một hộp chọn hỗ trợ chọn nhiều mục với nhiều thuộc tính trên các phần tử được chọn nhưng kết xuất của điều này thực sự không nhỏ gọn hoặc đẹp và không có nhiều bạn có thể thực hiện kiểu dáng khôn ngoan với các tùy chọn trong một lựa chọn Hộp cũng. Tôi không thể tìm thấy bất kỳ thiết kế tùy chỉnh nào phù hợp với phong cách mà tôi đang tìm kiếm nên cuối cùng tôi đã tự làm. Mã đầy đủ có sẵn trên github của tôi ở đây cùng với một thanh tìm kiếm phù hợp.

Điều này được xây dựng từ đầu do khó khăn trong việc thay đổi hành vi và kiểu dáng của một lựa chọn bình thường. Phần thường thấy của chọn là một nút đơn giản. Menu Dropdown là một div được ẩn bởi lớp Bootstrap Utility D-none, với làm tròn và bóng được áp dụng thông qua các lớp tiện ích Bootstrap Shadow và Rounded. Các tùy chọn là các hộp kiểm đơn giản với nhãn. Chúng có thể được thay thế bằng các nút radio nếu bạn muốn một hộp chọn đơn phù hợp.

Đây là HTML cuối cùng cho nút và menu

     onclick="dropDown(event);" class="menu-btn" type="button">
        Menu 1 ⌵
    
     class="d-none shadow rounded menu">
         class="d-block menu-option"> type="checkbox"> 
                Option 1
         class="d-block menu-option"> type="checkbox"> 
                Option 2
         class="d-block menu-option"> type="checkbox"> 
                Option 3