Comment créer des cases à cocher dans une liste déroulante pour plusieurs sélections ?

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

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

<div>

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css for select checkbox using this input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment puis-je centrer verticalement de manière fiable des éléments en CSS ?Article suivant：Comment puis-je centrer verticalement de manière fiable des éléments en CSS ?

Articles Liés

Voir plus

• Résumé de ce à quoi vous devez faire attention à propos de Border lors de l'écriture de CSS
• Comment réaliser une sélection multi-styles et un changement de styles en temps réel_Échange d'expérience
• Analyse détaillée de l'utilisation du chapiteau
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved