Wie kann ich die Hintergrundfarbe einer ausgewählten Option in einem HTML-Element ändern?

Anpassen der Hintergrundfarbe der ausgewählten Option in HTML Select

In HTML ist das Mit dem Element können Benutzer eine einzelne Option aus einer Liste von Optionen auswählen. Standardmäßig hebt der Browser die ausgewählte Option mit einem blauen Hintergrund hervor. Entwickler möchten dieses Erscheinungsbild jedoch häufig weiter anpassen.

Im bereitgestellten Beispiel wird ein

Element mit rotem Hintergrund ist definiert, die ausgewählte Option bleibt jedoch blau. Versuche, dieses Verhalten mithilfe eines Stils wie „selected-color“ zu überschreiben, haben sich als erfolglos erwiesen. Diese Frage befasst sich mit den verfügbaren Optionen, um die gewünschte Anpassung zu erreichen.

JavaScript-Lösung

Reines CSS allein reicht möglicherweise nicht aus, um dieses Problem zu lösen. Eine einfache JavaScript-Lösung kann das Problem jedoch elegant lösen.

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);

Diese grobe, aber effektive Methode stellt sicher, dass nur die ausgewählte Option die angegebene Farbe behält, während alle anderen auf Weiß zurückgesetzt werden.

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