<selectedcontent>: Das ausgewählte Anzeigefeld
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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 des aktuell ausgewählten <option>-Elements innerhalb seines ersten Kind-<button> anzuzeigen. Dies ermöglicht es Ihnen, alle Teile eines <select>-Elements zu stylen, die als "anpassbare Auswahlfelder" bezeichnet werden.
Attribute
Dieses Element enthält die globalen Attribute.
Beschreibung
Das <selectedcontent>-Element wird als einziges Kind eines <button>-Elements verwendet, das das erste Kind des <select>-Elements sein muss. Jedes <option>-Element, das einzige weitere gültige Kind von <select>, muss nach dem <button> und dem verschachtelten <selectedcontent>-Paar kommen.
<select>
<button>
<selectedcontent></selectedcontent>
</button>
<option></option>
...
</select>
Funktionsweise von <selectedcontent> im Hintergrund
Das <selectedcontent>-Element enthält eine Kopie des Inhalts des aktuell ausgewählten <option>. Der Browser rendert diese Kopie mithilfe von cloneNode(). Wenn sich die ausgewählte <option> ändert, beispielsweise während eines change-Ereignisses, wird der Inhalt von <selectedcontent> durch eine Kopie der neu ausgewählten <option> ersetzt. Bewusstsein über dieses Verhalten ist wichtig, besonders bei der Arbeit mit dynamischen Inhalten.
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> kopiert. Sie müssen <selectedcontent> manuell aktualisieren. Achten Sie darauf, wenn Sie eines der beliebten Front-End-JavaScript-Frameworks verwenden, bei denen <option>-Elemente dynamisch nach dem ersten Rendern aktualisiert werden–das Ergebnis könnte nicht dem entsprechen, was Sie in <selectedcontent> erwarten.
<selectedcontent>-Inertheit
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 innerhalb von <selectedcontent> interagieren oder darauf fokussieren können.
Styling des Inhalts der ausgewählten Option mit CSS
Sie können den Inhalt des aktuell ausgewählten <option>-Elements anvisieren und stylen, wie er innerhalb des Auswahlbuttons erscheint. Das Stylen des Buttons beeinflusst nicht das Styling des Inhalts der kopierten <option>. Dies ermöglicht es Ihnen, das Erscheinungsbild der ausgewählten Option im Button unabhängig von ihrem Erscheinungsbild in der Dropdown-Liste anzupassen.
Zum Beispiel können Ihre <option>-Elemente Symbole, Bilder oder sogar Videos enthalten, die in der Dropdown-Liste gut dargestellt werden, aber dazu führen können, dass der Auswahl-<button> an Größe zunimmt, unordentlich aussieht und die umliegende Anordnung beeinflusst. Indem Sie den Inhalt innerhalb von <selectedcontent> anvisieren, können Sie Elemente wie Bilder im Button ausblenden, ohne zu beeinflussen, wie sie in der Dropdown-Liste erscheinen, wie im folgenden Code-Beispiel 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 Rückfall-Button kann nicht mit CSS unter Verwendung des button oder selectedcontent-Typs selektiert werden.
Beispiele
Ein vollständiges Beispiel, das das <selectedcontent>-Element enthält, finden Sie in unserem Leitfaden für anpassbare Auswahl-Elemente.
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
| Specification |
|---|
| HTML # the-selectedcontent-element |
Browser-Kompatibilität
Loading…
Siehe auch
- Das
<select>-Element - Das
<option>-Element - Das
<optgroup>-Element - Anpassbare Auswahl-Elemente