<option> HTML <option>-Element

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

disabled

Wenn dieses boolesche Attribut gesetzt ist, kann diese Option nicht aktiviert werden. Oftmals grenzen Browser solche Steuerelemente aus und es wird kein Browsing-Ereignis, wie Mausklicks oder fokussierte Ereignisse, empfangen. 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 ein 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 Nachfahre eines <select>-Elements ist, dessen multiple-Attribut nicht gesetzt ist, darf nur ein einzelnes <option> dieses <select>-Elements das selected-Attribut haben.

value

Der Inhalt dieses Attributs stellt den Wert dar, der mit dem Formular übermittelt wird, sollte diese Option ausgewählt sein. Wenn dieses Attribut weggelassen wird, wird der Wert aus dem Textinhalt des Options-Elements übernommen.

Styling mit CSS

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

Legacy-Option-Styling

In Browsern, die die modernen Anpassungsfunktionen nicht unterstützen (oder bei älteren Codebasen, wo sie nicht verwendet werden können), hängt das Styling der <option>-Elemente vom Browser und Betriebssystem ab. Abhängig vom Betriebssystem wird die font-size des zugehörigen <select> in Firefox und Chromium respektiert. Chromium kann zusätzlich color, background-color, font-family, font-variant und text-align einstellen lassen.

Weitere Details zum Legacy-Styling von <option>-Elementen 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