Comment créer une liste de contrôle déroulante à sélection multiple personnalisée avec des cases à cocher en HTML, CSS et JavaScript ?

Création de listes de contrôle déroulantes à sélection multiple

Lors de la création d'une liste déroulante, il est souvent souhaitable de permettre aux utilisateurs de sélectionner plusieurs options. En utilisant HTML, cela peut être réalisé en utilisant des cases à cocher dans les options de liste déroulante.

Déroulante conventionnelle avec cases à cocher :

Lors de l'ajout de cases à cocher à une liste déroulante sans code supplémentaire, le des cases à cocher apparaissent devant le champ déroulant. Pour changer cela, une approche plus avancée est nécessaire.

Mise en œuvre d'une liste de contrôle déroulante personnalisée :

L'extrait de code suivant montre comment créer une liste de contrôle déroulante personnalisée :

<div>
<pre class="brush:php;toolbar:false">.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;
}

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

Explication :

• HTML : La structure HTML crée une liste déroulante de base avec un élément d'ancrage représentant l'en-tête du menu déroulant et une liste non ordonnée contenant les options du menu déroulant avec des cases à cocher.
• CSS : Les styles CSS définissent la disposition et l'apparence du menu déroulant, y compris le style des cases à cocher et le comportement d'affichage du options de liste déroulante.
• JavaScript : Le code JavaScript gère l'ouverture et la fermeture des options de liste déroulante lorsque l'on clique sur l'élément d'ancrage.