Das<option>-ElementHTML wird verwendet, um ein Element zu definieren, das in einem<select>, einem<optgroup> oder einem<datalist>-Element enthalten ist. So kann<option> Menüelemente 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>  <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 dieglobalen Attribute.

disabled

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

label

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

selected

Wenn vorhanden, weist dieses Boolesche Attribut darauf hin, dass die Option anfänglich ausgewählt ist. Wenn das<option>-Element ein Nachfahre eines<select>-Elements ist, dessenmultiple-Attribut nicht gesetzt ist, darf nur ein einziges<option> dieses<select>-Elements dasselected-Attribut haben.

value

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

Styling mit CSS

Das Styling von<option>-Elementen war historisch gesehen sehr eingeschränkt.Anpassbare Select-Elemente erläutern neuere Funktionen, die ihre vollständige Anpassung ermöglichen, ähnlich wie bei jedem regulären DOM-Element.

Legacy-Option-Styling

In Browsern, die die modernen Anpassungsfunktionen nicht unterstützen (oder in Legacy-Codebasen, in denen sie nicht verwendet werden können), hängt das verfügbare Styling für<option>-Elemente vom Browser und Betriebssystem ab. Abhängig vom Betriebssystem wird in Firefox und Chromium diefont-size des Besitzers<select> respektiert. Chromium kann zusätzlichcolor,background-color,font-family,font-variant undtext-align gesetzt werden.

Weitere Details zum Legacy-<option>-Styling finden Sie inunserem Leitfaden zum erweiterten Formularstyling.

Beispiele

Siehe<select> für Beispiele.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Andere formularbezogene Elemente:<form>,<legend>,<label>,<button>,<select>,<datalist>,<optgroup>,<fieldset>,<textarea>,<input>,<output>,<progress> und<meter>.
• Anpassbare Select-Elemente