Maison > interface Web > tutoriel CSS > Comment simuler la fonctionnalité d'une case à cocher dans un élément de sélection à l'aide de HTML, CSS et JavaScript ?

Comment simuler la fonctionnalité d'une case à cocher dans un élément de sélection à l'aide de HTML, CSS et JavaScript ?

Susan Sarandon
Libérer: 2024-12-20 21:37:16
original
569 Les gens l'ont consulté

How to Simulate Checkbox Functionality within a Select Element Using HTML, CSS, and JavaScript?

Comment simuler une case à cocher dans une option de sélection

Malgré les limitations liées à l'ajout de cases à cocher directement dans les éléments de sélection, il est possible d'obtenir un résultat similaire effet en utilisant HTML, CSS et JavaScript.

JavaScript Logique :

Nous définissons une fonction showCheckboxes() qui bascule l'affichage d'un div caché contenant les cases à cocher.

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}
Copier après la connexion

Structure HTML :

Nous créons un div avec une classe "multiselect" pour contenir notre élément select et un conteneur de case à cocher. Le div "selectBox" nous permet de cliquer et d'activer la visibilité de la case à cocher.

<div class="multiselect">
  <div class="selectBox" onclick="showCheckboxes()">
    <select>
      <option>Select an option</option>
    </select>
    <div class="overSelect"></div>
  </div>
  <div>
Copier après la connexion

Style CSS :

Nous appliquons des styles pour positionner et afficher correctement les éléments. Le div "overSelect" est transparent et recouvre l'élément select pour empêcher la sélection directe.

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
Copier après la connexion

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!

Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal