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

Option in HTML? " />

CSS-Styling für HTML <select> Ausgewählte Option Hintergrundfarbe

In HTML wird das <select>-Element zum Erstellen von Dropdown-Listen verwendet Für die Benutzerauswahl wird die Hintergrundfarbe standardmäßig blau. Sie können diese Farbe jedoch möglicherweise mithilfe von CSS anpassen.

Die CSS-Eigenschaft „selected-color“ existiert nicht für die Gestaltung der Hintergrundfarbe einer ausgewählten <select>-Option. Reines CSS allein reicht für diese Aufgabe möglicherweise nicht aus.

Javascript-Lösung

Ein praktikablerer Ansatz besteht darin, eine Kombination aus HTML, CSS und Javascript zu verwenden, um das gewünschte Ergebnis zu erzielen wie:

<select>

Im obigen HTML-Code haben wir ein <select>-Element mit einer vordefinierten roten Hintergrundfarbe erstellt.

select {
    color: black; /* Default color for options */
}

Dieses CSS legt die Standardfarbe für alle fest -Elemente innerhalb von <select> to black.

var sel = document.getElementById('mySelect');
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 Javascript-Code fügen wir einen Ereignis-Listener hinzu <select>-Element Wenn auf eine Option geklickt wird, werden alle -Elemente durchlaufen. Elemente und setzt deren Farbe auf Weiß. Anschließend wird die Farbe der ausgewählten Option auf Rot gesetzt.

Durch die Kombination von HTML, CSS und Javascript können Sie die standardmäßige blaue Hintergrundfarbe der ausgewählten <select>-Option überschreiben. Optionen und passen Sie es nach Ihren Wünschen an.

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