<selectedcontent> HTML Auswahl-Option Anzeigeelement
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
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 Ihnen, alle Teile eines <select>-Elements zu gestalten, die als "anpassbare Auswahlelemente" bezeichnet werden.
Attribute
Dieses Element beinhaltet die globalen Attribute.
Beschreibung
Sie verwenden das <selectedcontent>-Element als das einzige Kind eines <button>-Elements, das das erste Kind des <select>-Elements sein muss. Jedes <option>-Element, das einzige andere gültige Kind von <select>, muss nach dem <button> und dem verschachtelten <selectedcontent>-Paar folgen.
<select>
<button>
<selectedcontent></selectedcontent>
</button>
<option></option>
...
</select>
Funktionsweise von <selectedcontent> im Hintergrund
Das <selectedcontent>-Element enthält einen Klon des Inhalts der aktuell ausgewählten <option>. Der Browser rendert diesen Klon mit cloneNode(). Wenn sich die ausgewählte <option> ändert, zum Beispiel während eines change-Ereignisses, werden die Inhalte von <selectedcontent> durch einen Klon der neu ausgewählten <option> ersetzt. Es ist wichtig, sich dieses Verhaltens bewusst zu sein, insbesondere wenn Sie mit dynamischen Inhalten arbeiten.
Warnung:
Da der Browser <selectedcontent> nur aktualisiert, wenn sich die ausgewählte <option> ändert, werden dynamische Änderungen am Inhalt der ausgewählten <option> nach dem Rendern des <select> nicht in <selectedcontent> geklont. Sie müssen <selectedcontent> manuell aktualisieren. Seien Sie vorsichtig, wenn Sie eines der beliebten JavaScript-Frameworks für Frontend verwenden, bei denen <option>-Elemente nach dem initialen Rendern dynamisch aktualisiert werden – das Ergebnis in <selectedcontent> könnte nicht dem entsprechen, was Sie erwarten.
Inertheit von <selectedcontent>
Standardmäßig ist jedes <button> innerhalb eines <select>-Elements inert. Infolgedessen ist auch der gesamte Inhalt innerhalb dieses Buttons – einschließlich <selectedcontent> – inert. Das bedeutet, dass Benutzer nicht mit dem Inhalt in <selectedcontent> interagieren oder ihn fokussieren können.
Gestalten des Inhalts der ausgewählten Option mit CSS
Sie können den Inhalt des aktuell ausgewählten <option>-Elements anvisieren und gestalten, wie es innerhalb des Auswahl-Buttons erscheint. Das Styling des Buttons hat keinen Einfluss auf das Styling des Inhalts der <option>, das geklont wurde. Dies ermöglicht es Ihnen, wie die ausgewählte Option im Button erscheint, unabhängig davon anzupassen, wie sie in der Dropdown-Liste erscheint.
Zum Beispiel können Ihre <option>-Elemente Symbole, Bilder oder sogar Videos enthalten, die schön innerhalb des Dropdowns dargestellt werden, aber der Auswahl-<button> könnte dadurch in der Größe zunehmen, unordentlich aussehen und das umgebende Layout beeinflussen. Indem Sie den Inhalt innerhalb von <selectedcontent> anvisieren, können Sie Elemente wie Bilder im Button ausblenden, ohne zu beeinflussen, wie sie im Dropdown erscheinen, wie im folgenden Ausschnitt gezeigt:
selectedcontent img {
display: none;
}
Hinweis:
Wenn die <button>- und/oder <selectedcontent>-Elemente nicht innerhalb von <select> enthalten sind, erstellt der Browser ein implizites <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
Ein vollständiges Beispiel, das das <selectedcontent>-Element enthält, finden Sie in unserem Leitfaden zu anpassbaren Auswahl-Elementen.
Technische Zusammenfassung
| Inhaltskategorien | Keine |
|---|---|
| Erlaubter Inhalt |
Spiegelt den Inhalt der ausgewählten <option> wider.
|
| Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind erforderlich. |
| Erlaubte Eltern |
Ein <button>-Element, das das erste Kind eines <select>-Elements ist.
|
| Implizite ARIA-Rolle | Keine |
| Erlaubte ARIA-Rollen | Keine |
| DOM-Schnittstelle | [`HTMLSelectedContentElement`](/de/docs/Web/API/HTMLSelectedContentElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-selectedcontent-element |
Browser-Kompatibilität
Siehe auch
- Das
<select>-Element - Das
<option>-Element - Das
<optgroup>-Element - Anpassbare Auswahlelemente