Kann ich ein ausgewähltes Element basierend auf der ausgewählten Option nur mit CSS formatieren?

Stil Element basierend auf ausgewähltem

Können Sie ein -Element formatieren? Element basierend auf der ausgewählten nur CSS verwenden?

Entgegen der landläufigen Meinung ist es tatsächlich möglich, ein Element basierend auf der aktuell ausgewählten mit reinem CSS.

Die verbotene Frucht? Nicht mehr.

Traditionell wird beim Stylen der Das Element allein würde nur das Erscheinungsbild der Option in der Dropdown-Liste ändern, nicht jedoch das -Element. Element selbst. Moderne Fortschritte in CSS haben jedoch eine neue Grenze der Möglichkeiten eröffnet.

Geben Sie die Pseudoklasse :has() ein.

In Browsern, die beide :has unterstützen () Pseudoklasse und Stil von Elemente können Sie den folgenden Code nutzen:

select:has(option[selected][value="3"]) {
  background: orange;
}

Dieser Code wendet den orangefarbenen Hintergrund auf das an. Element, wenn die Option mit dem Wert „3“ wird ausgewählt.

Aber warten Sie, es gibt noch mehr!

CSS ermöglicht Ihnen auch, das Element, das über das onchange-Ereignis auf Änderungen in der ausgewählten Option reagiert. Durch Festlegen des Attributs „Daten ausgewählt“ des Element zum Wert der ausgewählten Option hinzufügen, können Sie ein dynamisches Styling basierend auf der Benutzerinteraktion erstellen.

<select onchange="this.dataset.chosen = this.value;">
  ...
</select>

select[data-chosen='opt3'] { 
    border: 2px solid red;
}

Mit diesem Ansatz haben Sie die vollständige Kontrolle über das Erscheinungsbild des -Elements. Element basierend auf der ausgewählten und sein Wert, der eine breite Palette an Anpassungsmöglichkeiten ermöglicht.

Das obige ist der detaillierte Inhalt vonKann ich ein ausgewähltes Element basierend auf der ausgewählten Option nur mit CSS formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!