<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, kann diese Option nicht ausgewählt werden. Oftmals blenden Browser solche Elemente aus, und sie erhalten keine Browserereignisse, wie Mausklicks oder fokussierungsbezogene Ereignisse. Wenn dieses Attribut nicht gesetzt ist, kann das Element immer noch deaktiviert sein, wenn einer seiner Vorfahren ein deaktiviertes <optgroup> Element ist.

label

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

selected

Wenn vorhanden, zeigt dieses boolesche Attribut an, dass die Option anfänglich ausgewählt ist. Wenn das <option> Element ein Nachkomme 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 wird, falls diese Option ausgewählt wird. Wenn dieses Attribut weggelassen wird, wird der Wert aus dem Textinhalt des Optionselements übernommen.

Gestaltung mit CSS

Die Gestaltung von <option>-Elementen war historisch gesehen stark eingeschränkt. Anpassbare Auswahl-Elemente erklärt neuere Funktionen, die ihre vollständige Anpassung ermöglichen, genau wie jedes reguläre DOM-Element.

Altes Optionsdesign

In Browsern, die die modernen Anpassungsfunktionen nicht unterstützen (oder in alten Codebasen, wo sie nicht verwendet werden können), hängt die Gestaltung, die auf <option>-Elementen verfügbar ist, vom Browser und Betriebssystem ab. Abhängig vom Betriebssystem wird die font-size des eigenen <select> in Firefox und Chromium respektiert. Chromium kann zusätzlich color, background-color, font-family, font-variant und text-align zulassen.

Sie finden weitere Details zu altem <option>-Design in unserem Leitfaden zur erweiterten Formulargestaltung.

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 Auswahl-Elemente