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 dieglobalen 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 voncloneNode(). Wenn sich die ausgewählte<option> ändert, beispielsweise während eineschange-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.

<selectedcontent>-Inertheit

Standardmäßig ist jedes<button> innerhalb eines<select>-Elementsinert. 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;}

Beispiele

Ein vollständiges Beispiel, das das<selectedcontent>-Element enthält, finden Sie in unseremLeitfaden für anpassbare Auswahl-Elemente.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das<select>-Element
• Das<option>-Element
• Das<optgroup>-Element
• Anpassbare Auswahl-Elemente