Wie kann ich die Hintergrundfarbe von Auswahlfeldoptionen mithilfe von CSS ändern?

So ändern Sie die Hintergrundfarbe von Auswahlfeldoptionen

Wenn Sie auf ein Auswahlfeld klicken, wird eine Liste mit Optionen angezeigt. Standardmäßig ist die Hintergrundfarbe dieser Optionen dieselbe wie die Hintergrundfarbe des Auswahlfelds selbst. Sie können jedoch CSS verwenden, um die Hintergrundfarbe der Optionen zu ändern.

Dazu müssen Sie die Eigenschaft „Hintergrundfarbe“ auf die Optionselemente anwenden, nicht auf das Auswahlelement. Der folgende CSS-Code ändert beispielsweise die Hintergrundfarbe aller Optionen in einem Auswahlfeld in Schwarz:

select option {
  background-color: black;
}

Wenn Sie jede Option einzeln formatieren möchten, können Sie die CSS-Attributauswahl verwenden. Der folgende CSS-Code ändert beispielsweise die Hintergrundfarbe der ersten Option in einem Auswahlfeld in Rot, die zweite Option in Grün und die dritte Option in Blau:

select option:first-child {
  background-color: red;
}

select option:nth-child(2) {
  background-color: green;
}

select option:nth-child(3) {
  background-color: blue;
}

Sie können auch eine andere Option verwenden Klassenattribute für jede Element, falls gewünscht. Der folgende CSS-Code ändert beispielsweise die Hintergrundfarbe aller Optionen in einem Auswahlfeld mit der Klasse Option-1 in Rot und alle Optionen mit der Klasse Option-2 in Grün:

.option-1 {
  background-color: red;
}

.option-2 {
  background-color: green;
}

Das obige ist der detaillierte Inhalt vonWie kann ich die Hintergrundfarbe von Auswahlfeldoptionen mithilfe von CSS ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!