<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.
Want more support for this feature? Tell us why.
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.
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.
<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:
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 | Keine |
|---|---|
| Erlaubter Inhalt |
Spiegelt den Inhalt der ausgewählten <option> wider.
|
| Tag-Auslassung | Keine, sowohl der Start- als auch der 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