suchen
HeimWeb-FrontendCSS-TutorialWie kann ich die Hintergrundfarbe einer ausgewählten -Option in HTML ändern?
Mary-Kate Olsen
Mary-Kate Olsen
Dec 07, 2024 am 01:20 AM

How Can I Change the Background Color of a Selected <select>Option in HTML? Option in HTML? " />

CSS-Styling für HTML

In HTML wird das

Die CSS-Eigenschaft „selected-color“ existiert nicht für die Gestaltung der Hintergrundfarbe einer ausgewählten

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></select>

Im obigen HTML-Code haben wir ein 

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 <p>In diesem Javascript-Code fügen wir einen Ereignis-Listener hinzu <select>-Element Wenn auf eine Option geklickt wird, werden alle <option>-Elemente durchlaufen. Elemente und setzt deren Farbe auf Weiß. Anschließend wird die Farbe der ausgewählten Option auf Rot gesetzt.</option></select></p><p>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.</select></p>

Das obige ist der detaillierte Inhalt vonWie kann ich die Hintergrundfarbe einer ausgewählten