How to Create Checkboxes Inside a Dropdown List for Multiple Selections?-CSS Tutorial-php.cn

Creating Checkboxes Inside a Dropdown List

When creating a multiple selection dropdown list, the goal is to enable users to select multiple options from a dropdown menu. Using a simple approach like adding a inside a tag results in the checkbox appearing in front of the dropdown field.

To address this and allow the selection of multiple options, a more sophisticated approach is required. Here's a solution that creates checkboxes for each option within the dropdown:

.dropdown-check-list { display: inline-block; }

.dropdown-check-list .anchor { position: relative; cursor: pointer; display: inline-block; padding: 5px 50px 5px 10px; border: 1px solid #ccc; }

.dropdown-check-list .anchor:after { position: absolute; content: ""; border-left: 2px solid black; border-top: 2px solid black; padding: 5px; right: 10px; top: 20%; -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }

.dropdown-check-list .anchor:active:after { right: 8px; top: 21%; }

.dropdown-check-list ul.items { padding: 2px; display: none; margin: 0; border: 1px solid #ccc; border-top: none; }

.dropdown-check-list ul.items li { list-style: none; }

.dropdown-check-list.visible .anchor { color: #0094ff; }

.dropdown-check-list.visible .items { display: block; } Copy after login var checkList = document.getElementById('list1'); checkList.getElementsByClassName('anchor')[0].onclick = function(evt) { if (checkList.classList.contains('visible')) checkList.classList.remove('visible'); else checkList.classList.add('visible'); }; Copy after login Copy after login This approach utilizes CSS and JavaScript to create a functional checklist that appears within the dropdown. By clicking on the "Select Fruits" anchor, users can show or hide the list of options and select multiple fruits using checkboxes.