Wie kann ich Kontrollkästchen in einem Auswahloptionsmenü mit HTML, CSS und JavaScript simulieren?

Einbinden eines Kontrollkästchens in eine Auswahloption

Die Unmöglichkeit, ein Kontrollkästchen direkt in ein Auswahloptionsmenü einzubetten, stellt eine Herausforderung dar, wenn man mit Designs konfrontiert wird, die diese Funktionalität erfordern. Es ist jedoch möglich, mit einer Kombination aus HTML, CSS und JavaScript etwas Ähnliches zu erreichen.

Implementierung

1. HTML-Struktur: Erstellen Sie ein Div mit dem Klasse „Multiselect“. Fügen Sie in dieses Div ein Select-Element und ein Div mit der Klasse „overSelect“ ein, die absolut positioniert ist, um das Select-Element abzudecken. Erstellen Sie außerdem ein weiteres Div mit der ID „checkboxes“, das die Kontrollkästchenoptionen enthält.
2. CSS-Stil: Gestalten Sie das ausgewählte Element so, dass es fetten Text hat, und wenden Sie visuelle Stile auf „overSelect“ an. div, um das Erscheinungsbild einer Auswahloption nachzuahmen. Definieren Sie Stile für das „Checkboxes“-Div, um seine Sichtbarkeit und sein Layout zu steuern.
3. JavaScript-Funktionalität: Verwenden Sie JavaScript, um die Sichtbarkeit des „Checkboxes“-Divs bei einem Klickereignis umzuschalten.

Code

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

var expanded = false;

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

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

Diese Lösung bietet einen Abschluss Annäherung an eine Kontrollkästchen-ähnliche Funktionalität innerhalb eines Menüs „Option auswählen“. Es ist jedoch wichtig zu beachten, dass es vom Standardverhalten eines Select Option-Elements abweicht.

Das obige ist der detaillierte Inhalt vonWie kann ich Kontrollkästchen in einem Auswahloptionsmenü mit HTML, CSS und JavaScript simulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!