Wie kann ich die Hintergrundfarbe ausgewählter Optionen in HTML-Elementen anpassen?

Ausgewählte Optionen in HTML formatieren <select> Elemente

In HTML-Formularen ist das <select> Das Element bietet eine Dropdown-Liste mit Optionen für die Benutzerauswahl. Standardmäßig wird die ausgewählte Option vor einem blauen Hintergrund angezeigt. In diesem Artikel wird erläutert, wie Sie die Hintergrundfarbe der ausgewählten Option mithilfe von CSS und JavaScript anpassen.

CSS-Ansatz

Leider gibt es keine inhärente CSS-Eigenschaft zum Ändern des Hintergrunds Farbe einer ausgewählten Option innerhalb eines <select> Element. Sie können jedoch ein benutzerdefiniertes Auswahlelement mit CSS und HTML erstellen, um dies zu erreichen:

<div class="custom-select">
  <select>

.custom-select {
  position: relative;
  width: 200px;
}

.custom-select select {
  display: none;
}

.custom-select-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.custom-select:hover .custom-select-overlay {
  opacity: 0.5;
}

.custom-select select:focus + .custom-select-overlay {
  opacity: 1;
}

JavaScript-Ansatz

Mit JavaScript können Sie das bearbeiten DOM direkt, um die Hintergrundfarbe der ausgewählten Option bei ihrer Auswahl zu ändern:

<select>

var select = document.getElementById('mySelect');

select.addEventListener('change', function() {
  var options = this.children;
  for (var i = 0; i < options.length; i++) {
    options[i].style.backgroundColor = 'white';
  }
  this.children[this.selectedIndex].style.backgroundColor = 'red';
});

Das obige ist der detaillierte Inhalt vonWie kann ich die Hintergrundfarbe ausgewählter Optionen in HTML-Elementen anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!