<option> 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 beinhaltet die globalen Attribute.

disabled

Wenn dieses boolesche Attribut gesetzt ist, ist diese Option nicht auswählbar. Oftmals werden solche Steuerelemente von Browsern grau dargestellt und erhalten keine Navigationsereignisse, wie Mausklicks oder Fokusereignisse. Ist dieses Attribut nicht gesetzt, kann das Element dennoch deaktiviert sein, wenn ein übergeordnetes <optgroup>-Element deaktiviert ist.

label

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

selected

Wenn vorhanden, zeigt dieses boolesche Attribut an, dass die Option initial 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 werden soll, wenn diese Option ausgewählt wurde. Ist dieses Attribut weggelassen, wird der Wert aus dem Textinhalt des Optionselements genommen.

Styling mit CSS

Das Styling von <option>-Elementen war historisch gesehen sehr eingeschränkt. Customizable select elements erklärt neuere Funktionen, die ihre vollständige Anpassung ermöglichen, genauso wie bei jedem regulären DOM-Element.

Legacy-Optionen-Styling

In Browsern, die die modernen Anpassungsfunktionen nicht unterstützen (oder in älteren Codebasen, wo sie nicht verwendet werden 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 respektiert. Chromium kann zusätzlich color, background-color, font-family, font-variant und text-align erlauben.

Mehr Details über 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 form-bezogene Elemente: <form>, <legend>, <label>, <button>, <select>, <datalist>, <optgroup>, <fieldset>, <textarea>, <input>, <output>, <progress> und <meter>.
• Customizable select elements