Wie simuliere ich die Kontrollkästchenfunktion innerhalb eines Auswahlelements mithilfe von HTML, CSS und JavaScript?

So simulieren Sie ein Kontrollkästchen innerhalb einer Auswahloption

Trotz der Einschränkungen beim direkten Hinzufügen von Kontrollkästchen zu Auswahlelementen ist es möglich, ein ähnliches Ergebnis zu erzielen Effekt mit HTML, CSS und JavaScript.

JavaScript Logik:

Wir definieren eine Funktion showCheckboxes(), die die Anzeige eines versteckten Divs umschaltet, das die Kontrollkästchen enthält.

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

HTML-Struktur:

Wir erstellen ein Div mit der Klasse „multiselect“, um unser Auswahlelement und einen Kontrollkästchencontainer zu enthalten. Mit dem Div „selectBox“ können wir auf die Sichtbarkeit des Kontrollkästchens klicken und diese umschalten.

<div class="multiselect">
  <div class="selectBox" onclick="showCheckboxes()">
    <select>
      <option>Select an option</option>
    </select>
    <div class="overSelect"></div>
  </div>
  <div>

CSS-Styling:

Wir wenden Stile an, um die Elemente korrekt zu positionieren und anzuzeigen. Das Div „overSelect“ ist transparent und deckt das ausgewählte Element ab, um eine direkte Auswahl zu verhindern.

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

Das obige ist der detaillierte Inhalt vonWie simuliere ich die Kontrollkästchenfunktion innerhalb eines Auswahlelements mithilfe von HTML, CSS und JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!