suchen

Heim >Web-Frontend >CSS-Tutorial >Wie kann ich die Hintergrundfarbe einer ausgewählten -Option in HTML ändern?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-07 01:20:13226Durchsuche

How Can I Change the Background Color of a Selected <select>Option in HTML? 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 

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

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