Wie kann ich die Hintergrundfarbe einer ausgewählten Option in einem „Element' mithilfe von CSS und JavaScript ändern?

Anpassen der Hintergrundfarbe der ausgewählten Option in mit CSS

Während CSS zahlreiche Styling-Optionen für

Elementen fehlt ein bestimmtes Stilattribut, um die Hintergrundfarbe der aktuell ausgewählten Option zu ändern. Eine Kombination aus reinem CSS und JavaScript kann diese Einschränkung jedoch wirksam beheben.

Im bereitgestellten Beispiel-HTML-Code ist das Das Element legt mit „background-color:red;“ eine Hintergrundfarbe für die Dropdown-Liste fest. Bei Auswahl einer Option wird jedoch die Standardfarbe Blau angenommen. Um dies zu überschreiben und die Hintergrundfarbe für die ausgewählte Option anzupassen, reichen herkömmliche CSS-Techniken nicht aus.

Hier kommt JavaScript ins Spiel:

var sel = document.getElementById('select_id');
sel.addEventListener('click', function(el){
    var options = this.children;
    for(var i=0; i < this.childElementCount; i++){
        options[i].style.color = 'white';
    }
    var selected = this.children[this.selectedIndex];
    selected.style.color = 'red';
}, false);

In diesem Skript:

• Wir rufen die

Element anhand seiner ID.

Wenn der Benutzer auf die Schaltfläche klickt; Element durchläuft es alle untergeordneten Elemente (Optionen), um deren Farbe auf Weiß festzulegen.

Dann ruft es die ausgewählte Option ab und setzt deren Farbe auf Rot, wodurch sie vom Rest hervorgehoben wird.

Während diese JavaScript-Lösung die Anpassung der Hintergrundfarbe der ausgewählten Option ermöglicht, ist es wichtig zu beachten, dass sie den CSS-Stil des Elements nicht direkt ändert. Es manipuliert das dynamische Erscheinungsbild des Elements über JavaScript. Dieser Ansatz kann eine praktikable Lösung sein, wenn lediglich die Hintergrundfarbe der ausgewählten Option angepasst werden soll und keine weitere CSS-Anpassung des

erforderlich ist. Element.

Das obige ist der detaillierte Inhalt vonWie kann ich die Hintergrundfarbe einer ausgewählten Option in einem „Element' mithilfe von CSS und JavaScript ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!