<selectedcontent> HTML ausgewähltes Optionsanzeigeelement

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das <selectedcontent> HTML wird innerhalb eines <select>-Elements verwendet, um den Inhalt der aktuell ausgewählten <option> innerhalb seines ersten Kind-<button> anzuzeigen. Dies ermöglicht es Ihnen, alle Teile eines <select>-Elements zu stylen, die als "anpassbare Auswahlen" bezeichnet werden.

In diesem Artikel

Attribute

Dieses Element umfasst die globalen Attribute.

Beschreibung

Verwenden Sie das <selectedcontent>-Element als einziges Kind eines <button>-Elements, das das erste Kind des <select>-Elements sein muss. Jedes andere <option>-Element, das einzige andere gültige Kind von <select>, muss nach dem <button> und dem eingebetteten <selectedcontent>-Paar kommen.

html
<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option></option>
  ...
</select>

Wie <selectedcontent> im Hintergrund funktioniert

Das <selectedcontent>-Element enthält eine Kopie des Inhalts der aktuell ausgewählten <option>. Der Browser rendert diese Kopie unter Verwendung von cloneNode(). Wenn sich die ausgewählte <option> ändert, etwa bei einem change-Ereignis, wird der Inhalt von <selectedcontent> durch eine Kopie der neu ausgewählten <option> ersetzt. Es ist wichtig, dieses Verhalten zu verstehen, insbesondere wenn Sie mit dynamischen Inhalten arbeiten.

Warnung: Da der Browser <selectedcontent> nur dann aktualisiert, wenn sich die ausgewählte <option> ändert, werden alle dynamischen Änderungen am Inhalt der ausgewählten <option> nach dem Rendern des <select> nicht in <selectedcontent> kopiert. Sie müssen <selectedcontent> manuell aktualisieren. Seien Sie vorsichtig, wenn Sie eines der beliebten Front-End-JavaScript-Frameworks verwenden, bei denen <option>-Elemente nach dem initialen Rendern dynamisch aktualisiert werden – das Ergebnis in <selectedcontent> kann möglicherweise nicht den Erwartungen entsprechen.

<selectedcontent> Untätigkeit

Standardmäßig ist jedes <button> innerhalb eines <select>-Elements inaktiv. Infolgedessen ist auch der gesamte Inhalt innerhalb dieses Buttons – einschließlich <selectedcontent> – inaktiv. Das bedeutet, dass Benutzer nicht mit dem Inhalt von <selectedcontent> interagieren oder ihn fokussieren können.

Styling des Inhalts der ausgewählten Option mit CSS

Sie können den Inhalt des derzeit ausgewählten <option>-Elements anvisieren und stylen, wie es innerhalb des Auswahl-Buttons erscheint. Das Styling des Buttons beeinflusst nicht das Styling des Inhalts der kopierten <option>. Dies ermöglicht es Ihnen, das Erscheinungsbild der ausgewählten Option im Button anzupassen, unabhängig davon, wie sie in der Dropdown-Liste erscheint.

Zum Beispiel können Ihre <option>-Elemente Icons, Bilder oder sogar Videos enthalten, die im Dropdown schön dargestellt werden, aber den <button> der Auswahl vergrößern, unordentlich aussehen lassen und das umliegende Layout beeinflussen könnten. Indem Sie den Inhalt in <selectedcontent> anvisieren, können Sie Elemente wie Bilder im Button ausblenden, ohne zu beeinflussen, wie sie im Dropdown erscheinen, wie im folgenden Ausschnitt gezeigt:

css
selectedcontent img {
  display: none;
}

Hinweis: Wenn die <button>- und/oder <selectedcontent>-Elemente nicht innerhalb von <select> enthalten sind, erstellt der Browser einen impliziten <button>, um den Inhalt der ausgewählten <option> anzuzeigen. Dieser Ersatz-Button kann nicht mit CSS unter Verwendung des button oder selectedcontent Typselektors anvisiert werden.

Beispiele

Sie können ein vollständiges Beispiel sehen, das das <selectedcontent>-Element in unserem Leitfaden für anpassbare Auswahlelemente beinhaltet.

Technische Zusammenfassung

Inhaltskategorien Erlaubter Inhalt Tag-Auslassung Erlaubte Eltern Implizite ARIA-Rolle Erlaubte ARIA-Rollen DOM-Schnittstelle

Keine

Spiegelt den Inhalt der ausgewählten <option> wider.

Keine, sowohl der Start- als auch der End-Tag sind erforderlich.

Ein <button>-Element, das das erste Kind eines <select>-Elements ist.

Keine

[`HTMLSelectedContentElement`](/de/docs/Web/API/HTMLSelectedContentElement)

Das <select>-Element
Das <option>-Element
Das <optgroup>-Element
Anpassbare Auswahlelemente

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden