Comment créer des cases à cocher dans une liste déroulante pour plusieurs sélections ?-tutoriel CSS-php.cn

Création de cases à cocher dans une liste déroulante

Lors de la création d'une liste déroulante à sélection multiple, l'objectif est de permettre aux utilisateurs de sélectionner plusieurs options dans une liste déroulante. menu déroulant. En utilisant une approche simple comme l'ajout d'un à l'intérieur d'un la balise entraîne la case à cocher apparaissant devant le champ déroulant.

Pour résoudre ce problème et permettre la sélection de plusieurs options, une approche plus sophistiquée est nécessaire. Voici une solution qui crée des cases à cocher pour chaque option dans la liste déroulante :

.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; } Copier après la connexion 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'); }; Copier après la connexion Copier après la connexion Cette approche utilise CSS et JavaScript pour créer une liste de contrôle fonctionnelle qui apparaît dans la liste déroulante. En cliquant sur l'ancre « Sélectionner les fruits », les utilisateurs peuvent afficher ou masquer la liste des options et sélectionner plusieurs fruits à l'aide de cases à cocher.