Kann CSS allein ein „Element basierend auf seinem ausgewählten' formatieren?

Styling Elemente basierend auf ausgewählter : Ist CSS allein geeignet? Problem: Der Versuch, ein zu formatieren Element basierend auf der ausgewählten Die Verwendung von CSS hat sich als Herausforderung erwiesen. Im Gegensatz zu Optionselementen, die direkt formatiert werden können, bleibt die Formatierung des ausgewählten Elements schwer zu bestimmen.

Antwort:

CSS allein reicht nicht aus, um ein -Element zu formatieren. Element basierend auf der ausgewählten . Eine clevere Problemumgehung mit dem onchange-Ereignis und einer Datenattributzuweisung kann Ihnen jedoch diese begehrte Fähigkeit verleihen.

Lösung:

Weisen Sie einen Wert zu zum datengewählten Attribut: Auf der Seite Element hinzufügen, fügen Sie ein onchange-Ereignis hinzu, das dem von den Daten ausgewählten Attribut den aktuellen Wert zuweist. Dadurch wird der Wert der ausgewählten Option für CSS verfügbar gemacht. Zielen Sie auf das ausgewählte Element: Erstellen Sie CSS-Regeln, die auf das -Element abzielen. Element basierend auf dem datengewählten Attribut. In diesem Beispiel dient der opt3-Wert dazu, die ausgewählte Option zu formatieren. ... ... select[data-chosen='opt3'] { border: 2px solid red; } Hinweis: Diese Lösung bietet zwar eine effektive Möglichkeit, basieren, werden möglicherweise nicht allgemein von allen Browsern unterstützt.