<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 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