<option>: Das HTML Option-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <option> HTML-Element wird verwendet, um ein Element innerhalb eines <select>, eines <optgroup>, oder eines <datalist> Elements zu definieren. Als solches kann <option> Menüpunkte in Popups und anderen Listen von Elementen in einem HTML-Dokument darstellen.

Probieren Sie es aus

<label for="pet-select">Choose a pet:</label>

<select id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

Attribute

Dieses Element enthält die globalen Attribute.

disabled

Wenn dieses Boolesche Attribut gesetzt ist, kann diese Option nicht ausgewählt werden. Häufig werden solche Steuerelemente von Browsern ausgegraut und erhalten keine Browserevents, wie Mausklicks oder Fokus-bezogene Ereignisse. Wenn dieses Attribut nicht gesetzt ist, kann das Element dennoch deaktiviert sein, wenn einer seiner Vorfahren ein deaktiviertes <optgroup> Element ist.

label

Dieses Attribut ist Text für das Label, das die Bedeutung der Option angibt. Wenn das label-Attribut nicht definiert ist, ist sein Wert der Textinhalt des Elements.

selected

Wenn vorhanden, zeigt dieses Boolesche Attribut an, dass die Option anfänglich ausgewählt ist. Wenn das <option> Element ein Nachfolger eines <select> Elements ist, dessen multiple-Attribut nicht gesetzt ist, darf nur ein einziges <option> dieses <select> Elements das selected-Attribut haben.

value

Der Inhalt dieses Attributs repräsentiert den Wert, der mit dem Formular übermittelt werden soll, sollte diese Option ausgewählt werden. Wenn dieses Attribut weggelassen wird, wird der Wert aus dem Textinhalt des Optionselements übernommen.

Styling mit CSS

Das Styling von <option> Elementen war traditionell stark eingeschränkt. Anpassbare Select-Elemente erklärt neuere Funktionen, die ihre vollständige Anpassung ermöglichen, ganz wie normale DOM-Elemente.

Altes Option-Styling

In Browsern, die die modernen Anpassungsfunktionen nicht unterstützen (oder in Codebasen, die sie nicht nutzen können), hängt das verfügbare Styling von <option> Elementen vom Browser und Betriebssystem ab. Abhängig vom Betriebssystem wird die font-size des besitzenden <select> in Firefox und Chromium berücksichtigt. Chromium kann zusätzlich color, background-color, font-family, font-variant und text-align zulassen.

Weitere Details zum alten <option> Styling finden Sie in unserem Leitfaden zum erweiterten Formular-Styling.

Beispiele

Siehe <select> für Beispiele.

Technische Zusammenfassung

Inhaltskategorien Keine.
Erlaubter Inhalt In traditionellen <select>-Elementen ist nur Textinhalt erlaubt, möglicherweise mit maskierten Zeichen (wie &eacute;). In anpassbaren Select-Elementen können <option>-Elemente beliebigen Inhalt haben.
Tag-Auslassung Das Start-Tag ist obligatorisch. Das End-Tag ist optional, wenn dieses Element direkt von einem anderen <option>-Element oder einem <optgroup> gefolgt wird, oder wenn das Elternelement keinen weiteren Inhalt hat.
Erlaubte Eltern Ein <select>, ein <optgroup>, oder ein <datalist> Element.
Implizierte ARIA-Rolle option
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLOptionElement`](/de/docs/Web/API/HTMLOptionElement)

Spezifikationen

Specification
HTML
# the-option-element

Browser-Kompatibilität

Siehe auch