<option>: Das HTML-Optionselement

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, 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 das label-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, dessen multiple-Attribut nicht gesetzt ist, darf nur ein einziges <option> dieses <select>-Elements das selected-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 die font-size des Besitzers <select> respektiert. Chromium kann zusätzlich color, background-color, font-family, font-variant und text-align gesetzt werden.

Weitere Details zum Legacy-<option>-Styling finden Sie in unserem 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