Formulare/Auswahllisten

Oft gibt es in Formularen aber auch Buttons, die mehrere Möglichkeiten zur Auswahl bieten. Hier würde eine Verwendung von button-Elementen zwingend den Einsatz von JavaScript zur Auswertung erfordern.

Einfacher und „unkaputtbarer“ ist eine Verwendung von input-Elementen wie Radio-Buttons bzw. Checkboxen, die auch ohne JavaScript oder CSS noch funktionsfähig sind.

Alternativ kann man das select-Element verwenden, das mittlerweile auch mit CSS formatiert werden kann.

Radio-Buttons

Radio-Buttons (<input type="radio" ...>) sind eine Gruppe von beschrifteten Knöpfen, von denen der Anwender einen auswählen kann. Sobald ein Radiobutton markiert wird, wird eine eventuell vorhandene Markierung eines anderen Radiobuttons derselben Gruppe gelöscht.

Radio-Buttons für Zahlungsweise ansehen …

<form> <p>Geben Sie Ihre Zahlungsweise an:</p> <fieldset> <input type="radio" id="mc" name="Zahlmethode" value="Mastercard"> <label for="mc"> Mastercard</label> <input type="radio" id="vi" name="Zahlmethode" value="Visa"> <label for="vi"> Visa</label> <input type="radio" id="ae" name="Zahlmethode" value="AmericanExpress"> <label for="ae"> American Express</label> </fieldset> </form>

Folgende Attribute sind möglich:

name: Alle Radio-Buttons, die den gleichen internen Bezeichnernamen haben, gehören zu einer Gruppe, d. h. von diesen Buttons kann der Anwender genau einen markieren.
value: bestimmt einen internen Bezeichnerwert für jeden Radio-Button (value = Wert). Wenn der Anwender das Formular abschickt, wird der Bezeichnerwert des markierten Buttons übertragen.
checked: Wenn du eine der Auswahlmöglichkeiten vorselektieren willst, dann notiere im <input>-Tag des entsprechenden Radio-Buttons das boolesche Attribut checked, also z. B.: <input type="radio" name="Typ" value="Kassenpatient" checked>
Beachte: Mehr als eine Auswahlmöglichkeit darf bei Radio-Buttons nicht vorselektiert werden.

Zu jedem input "type=radio" gehört ein label-Element, das als Beschriftung der jeweiligen Option erscheint. Es kann vor oder hinter dem Radio-Button stehen und ist mittels des for-Attributes mit der ID des zugehörigen Radio-Buttons verknüpft.

Eine solche Mehrfachauswahl ist für alle zugänglich:

Mit der Tastatur kann man die Gruppe mit der Tab-Taste ( ⭾ ) ansteuern und dann mit der Leertaste auswählen. Mit Pfeil rechts ( → ) / unten ( ↓ ) geht es zum nächsten Button, der ausgewählt wird.
Mit der Maus können die Radio-Buttons, aber auch die dazu gehörigen Beschriftungen angeklickt werden.

Checkboxen

Eine Checkbox (<input type="checkbox">) ist ein ankreuzbares Kontrollfeld. Der Benutzer kann es auswählen oder die Auswahl entfernen.

Checkboxen für Mehrfachauswahl ansehen …

<fieldset>
  <legend>Zutaten</legend>
  <input type="checkbox" id="all">
  <label for="all">Alle Zutaten auswählen</label><br><br>

  <input type="checkbox" name="zutat" value="Käse" id="check1" checked>
  <label for="check1">Käse</label><br>
  <input type="checkbox" name="zutat" value="Schinken" id="check2">
  <label for="check2">Schinken</label><br>
  <input type="checkbox" name="zutat" value="Salami" id="check3">
  <label for="check3">Salami</label><br>
  <input type="checkbox" name="zutat" value="Oliven" id="check4">
  <label for="check4">Oliven</label><br>
  <input type="checkbox" name="zutat" value="Paprika" id="check5">
  <label for="check5">Paprika</label><br>
  <input type="checkbox" name="zutat" value="Pilze" id="check6">
  <label for="check6">Pilze</label>
</fieldset>

Im Beispiel gibt es

Radio-Buttons für den Boden, bei dem nur eine Auswahl möglich ist.
Checkboxen für die Zutaten, von denen beliebig viele ausgewählt werden können.

Zu jedem input "type="checkbox" gehört ein Label-Element, der als Beschriftung der jeweiligen Option erscheint. Es kann vor oder hinter dem Ankreuzfeld stehen und ist mittels des for-Attributs mit der ID der zugehörigen Checkbox verknüpft.

Folgende Attribute sind möglich:

checked: Wenn du eine (oder mehrere) Auswahlmöglichkeiten vorselektieren willst, dann notiere im <input>-Tag der entsprechenden Checkbox das boolesche Attribut checked
readonly: Boolean ; wenn vorhanden, wird das Erscheinungsbild abgeändert, so dass angezeigt wird, dass der Wert nicht geändert werden kann.
value: bestimmt einen internen Bezeichnerwert für jede Checkbox (value = Wert). Wenn der Anwender das Formular abschickt, wird der Bezeichnerwert des oder der markierten Buttons übertragen.

Die Werte von ausgewählten Checkboxen werden beim Absenden des Formulars mit übertragen.

Im Gegensatz zu Radio-Buttons müssen Checkboxen keine identische Namen haben, um zu funktionieren. Es ist aber hinsichtlich des auswertenden Skripts eventuell sehr sinnvoll, identische Namen zu verwenden, weil das Skript dann automatisch ein Array anlegen kann. PHP legt das Array automatisch an, wenn der Name auf "[]" endet.

Checkboxen in HTML kennen die Zustände

ausgewählt (engl. checked) und
nicht ausgewählt.
unbestimmt (engl. indeterminate) Der aus der grafischen Oberfläche von Betriebssystemen bekannte dritte Zustand, der oft gräulich oder mit einem Quadrat statt einem Haken dargestellt wird, kann nur mit JavaScript gesetzt werden.^[1] Mit dem :indeterminate-Selektor können Checkboxen mit diesem Zustand selektiert werden.

Normalerweise sind Radio-Buttons, Checkboxen und ihre labels Inline-Elemente, d.h. sie werden innerhalb einer Zeile nebeneinander dargestellt. Du kannst eine Gruppe durch div-Elemente oder innerhalb einer Liste untereinander platzieren.
In den oberen Beispielen wurde dies ohne weitere Elemente durch ein (leeres) Pseudoelement erreicht:

label::after {
	content: "";
	display: block;
}

Gestaltung mit CSS

Eine Formatierung mit color und background-color ist bei Radio-Buttons und Checkboxen nicht möglich.

Klassischer Umweg war das Ausblenden der Checkbox, die durch ein frei formatierbares Pseudoelement ersetzt wurde:

Pseudoelemente als Checkboxen ansehen …

input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

label::before {
  content: '';
  width: 1em;
  height: 1em;
  padding: 0.2em;
  border: 2px solid green;
  border-radius: 0 0.5em 0.5em;
  margin-right: 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

input:checked + label::before {
  content: '✓';
  background-color: lime;
  border: 2px solid green;
}

Die Checkboxen werden visuell ausgeblendet, bleiben aber mit der Tastatur bedienbar. An ihre Stelle tritt ein Pseudoelement mit einem grünen, abgerundeten Rand.

Das oben erwähnte checked-Attribut kann mit dem :checked-Selektor ausgewählt und dann formatiert werden. In diesem Beispiel wird das Kästchen hellgrün gefärbt und erhält über die content-Eigenschaft ein Häkchen.

Der gleiche Selektor kann in Verbindung mit dem Nachbar-Kombinator input:checked + label das dazugehörende Label formatieren.

Checkboxen mit accent-color gestalten

Die Eigenschaft accent-color ermöglicht die Wahl einer Akzentfarbe, die Elemente wie input type="checkbox" oder type="radio" einfärbt. ^[2]

Browserunterstützung
caniuse.com

accent-color ansehen …

#base input {
  accent-color: brown;
}

#toppings input {
  accent-color: red;
}

#toppings .veg {
  accent-color: lime;
}

input:checked + label {
  font-weight: bold;
}

Probier' im Frickl andere Farben zu setzen (z.B. orange anstelle des brown und teste die Bedienung des Formulars mit der Tab-Taste. Die mit accent-color gesetzte Farbe wird je nach Helligkeit der Schriftfarbe als Hintergrund- oder Vordergrundfarbe verwendet.

Mit input:checked + label werden die Beschriftungen ausgewählter Elemente selektiert und der Text fett dargestellt.

Radio-Buttons verstecken

Wenn Du Nutzern deiner Webseite eine Auswahl aus mehreren Möglichkeiten anbieten willst, ist ein Menü aus Radio-Buttons semantisch die beste Wahl. Häufig soll dies aber an das Seitendesign angepasst werden. Im folgenden Beispiel werden die Radio-Buttons versteckt – die Funktionalität bleibt als Standardverhalten auch ohne JavaScript erhalten.^[3]

HTML-Struktur

    <div class="toggle-buttons">
      <input type="radio" id="b1" name="group-b"/>
      <label for="b1">Pizza</label>
      <input type="radio" id="b2" name="group-b"/>
      <label for="b2">Pasta</label>
      <input type="radio" id="b3" name="group-b" />
      <label for="b3">Pommes</label>
    </div>

Unser Menü besteht aus input-Feldern vom type="radio". Über den gemeinsamen name ist festgelegt, dass nur eine Auswahl erlaubt wird.

Die folgenden label-Elemente werden über das for-Attribut mit der id des zugehörenden input-Elements verbunden. Damit kannst du den Radio-Button auch mit einem Klick auf die Erklärungen auswählen.

CSS ansehen …

.toggle-buttons input[type="radio"] {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.toggle-buttons label {
  border: 1px solid #333;
  border-radius: 0.5em;
  padding: 0.5em;
}
 
.toggle-buttons input:checked + label {
  background: #ebf5d7;
  color: #5a9900;
  box-shadow: none;
}

input:hover + label,
input:focus + label {
  background: #ffebe6; 
}

Über den Attributsselektor input[type="radio"] werden alle Radio-Buttons mit Image-Replacement visuell so ausgeblendet, dass ihre Funktionalität auch für Screenreader gewährleistet bleibt.

Labels erhalten einen (abgerundeten) Rand, der durch ein padding von 0.5em vergrößert wird.

Dabei müssen sowohl die Zustände, wie auch das Verhalten mit CSS gekennzeichnet werden:

Bei der Auswahl eines Radio-Buttons wird über den Nachbar-Kombinatorinput:checked + label das dazugehörende Label grün eingefärbt. Ein evtl. vorher angeklickter Button verliert dann seine Pseudoklassechecked und fällt wieder in seinen Urzustand zurück.
Wenn man einen (unsichtbaren) Radio-Button mit der Tastatur ansteuert, wird das Label entsprechend (input:focus + label) mit einem roten Hintergrund gekennzeichnet.

Es gibt im SELF-Wiki einige Anwendungsbeispiele, die dieses Prinzip verwenden:

Im Mathe-Quiz kann so der gewünschte Operator ausgewählt werden.
Im Lotto-Tutorial wird so ein Lotto-Auswahlfeld nachgebaut.
Das Multiple-Choice-Quiz ermöglicht eine Auswahl zwischen möglichen Antworten.

Toggle-Schalter

Ein toggle-Switch oder FlipFlop-Schalter ist ein Software-Feature, das zwischen zwei Zuständen hin- und her schaltet.

HTML-Struktur

<label>
  An-/Aus-Schalter   
  <input type="checkbox">
  <span></span>
</label>

Für das Beispiel verwenden wir ein input-Feld vom type="checkbox", das zusammen mit einem span-Element in einem label-Element verschachtelt ist.

CSS - FlipFlop-Schalter ansehen …

.toggle label {
  position: relative;
  display: inline-block;
  width: 10em;
  height: 3.5em;
}

.toggle input {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
 
.toggle .slider { /* Grundfläche */
  position: absolute;
  cursor: pointer;
  top: 1.5em; 
  left: 3em;
  width: 4em;
  height: 2em;
  background-color: #c82f04; 
  border-radius: 1em; 
  transition: all .3s ease-in-out;
}
 
.toggle  .slider::before {  /* verschiebbarer Button */
  position: absolute;
  content: "";
  height: 1.6em;
  width: 1.6em;
  left: .2em;
  bottom: .2em;
  background-color: white;
  border-radius: 50%;
  transition: all .3s ease-in-out;
}

Das Label wird zum Ausgangspunkt des Schalters, an dem absolut ausgerichtete Elemente orientiert sind.

Die Checkbox wird ausgeblendet. Allerdings ist sie trotzdem funktionsfähig und ihr Zustand kann mit einem Klick auf das Label aktiviert werden.

Die Grundfläche des Sliders span class="slider" wird absolut unterhalb der Beschreibung positioniert.

Mit .slider::before{} wird nun ein Pseudoelement absolut über die Grundfläche positioniert. Es erhält die Form eines kreisförmigen, weißen Buttons.

CSS - FlipFlop-Schalter ansehen …

.toggle input:checked + .slider {
  background-color: #5a9900; 
}
 
.toggle  input:checked + .slider::before {
  transform: translateX(1.9em);
}

Sobald der Schalter angeklickt wird, ändert sich der Zustand der (nicht sichtbaren) Checkbox. Über die Pseudoklasse checked und den Nachbar-Kombinator wird nun die Hintergrundfarbe der Grundfläche und die Position des weißen Buttons verändert.

flipFlop-Schalter mit Text ansehen …

.text .slider::before {  /* Text vor dem Toggle-Schalter */
  position: absolute;
  content: "AUS";
  color: #c82f04;
  font-weight: bold;
  height: 1.6em;
  left: -2.5em;
  bottom: .2em;
}
 
.text input:checked + .slider::after {  /* Text hinter dem Toggle-Schalter */
  position: absolute;
  content: "AN";
  color: #5a9900;
  left: 4.5em;
}

Das untere Beispiel erhält ein weiteres Pseudoelement. Mit der content-Eigenschaft erhält es eine Beschreibung des Zustands in der passenden Farbe.

Sobald der Schaltzustand geändert wird, wird ein neuer Text an anderer Stelle und in einer anderen Farbe eingeblendet.

Exkurs: Checkbox-Hack

Achtung!

Mit dem Checkbox-Hack wird eine Checkbox dazu zweckentfremdet, Interaktivität ohne den Einsatz von JavaScript zu erreichen. Dabei bestimmt der Zustand der Checkbox die Formatierung eines nahe gelegenen anderen Elements. Typischerweise ist die Checkbox dabei vollständig durch CSS ausgeblendet und wird durch verbundene label-Elemente kontrolliert.^[4]

Das dabei entstehende Stylesheet ist recht komplex und die Seite ist nicht barrierefrei. Zudem verstößt der Einsatz gegen die separation of concerns, die Trennung von Inhalt, Präsentation und Verhalten.

Das folgende Beispiel sollte daher als proof of concept angesehen werden. Es werden (wie für die meisten Varianten des Checkbox-Hacks) einige nicht-triviale CSS-Eigenschaften bzw. Selektoren genutzt:

Der Klassenselektor
Der Geschwister-Kombinator ~
Das Pseudoelement before
Die dynamische Pseudoklasse checked

Empfehlung: Verwende lieber das von allen Browsern unterstützte details-Element!

-- Matthias Scharwies (Diskussion) 08:36, 2. Jan. 2021 (CET)

"Mehr lesen" mit dem Checkbox-Hack ansehen …

<h2>Lesbarkeit</h2>

<p>Lieber Kunde und Leser, falls Sie keine Probleme haben, [...weiterer Blindtext...] par excellence.<br>

  <input type="checkbox" class="hackbox mehr_lesen" id="mehr_lesen_lesbarkeit">

  <span class="volltext">Er hat diesen Copyblock weder [...weiterer Blindtext...] Arbeit haben.<br></span>

  <label class="mehr_lesen" for="mehr_lesen_lesbarkeit"> lesen...</label>
</p>

/* allgemeines */
input.hackbox {
  display:none;
}
 
/* default-Zustand */
span.volltext {
  display:none;
}
 
label.mehr_lesen {
  color:#0091D2;
}
 
label.mehr_lesen::before {
  content:" mehr";
  color:#0091D2;
}
 
/* bei gesetztem Haken */
input.mehr_lesen:checked ~ span.volltext {
  display:inline;
} 
 
input.mehr_lesen:checked ~ label.mehr_lesen::before {
  content:" weniger";
  color:#0091D2;
}

Im Default-Zustand ist der Volltext versteckt. Bei Klick auf das label wird der Haken in der Checkbox gesetzt, sodass die letzteren CSS-Regeln greifen - der Volltext wird angezeigt und der mit before generierte content vor dem label wird von " mehr" zu " weniger".

Beachte, dass die Checkbox im HTML-Code vor den Elementen stehen muss, die sie kontrolliert.

Auswahllisten mit select

Neben der Kombination aus interaktivem input- und beschreibendem label-Element gibt es noch eine Möglichkeit:

Du kannst dem Anwender mit dem select-Element eine Auswahlliste mit festen Einträgen anbieten, aus der er einen Eintrag auswählen kann.

Das „klassische“ select ansehen …

<form action="select.html"> <label for="favourite_Artist">Künstler(in):</label> <select id="favourite_Artist" name="favourite_Artist" size="5"> <option>Heino</option> <option>Michael Jackson</option> <option>Tom Waits</option> <option selected>Nina Hagen</option> <option>Marianne Rosenberg</option> </select> </form>

      <label for="favorite_2">Künstler(in)</label>
        <select id="favorite_2" name="favorite_2" name="top5">
          <option>Wähle deinen Favoriten!</option>
          <option value="1">Heino</option>
          <option value="2">Michael Jackson</option>
          <option value="3">Tom Waits</option>
          <option value="4">Nina Hagen</option>
          <option value="5">Marianne Rosenberg</option>
        </select>

Das size-Attribut bestimmt die Anzeigegröße der Liste, also die Anzahl der Zeilen bzw. gleichzeitig anzuzeigenden Einträge. Die Breite der Listenanzeige wird automatisch ermittelt, abhängig vom längsten Eintrag an. Wenn die Liste mehr Einträge enthält als angezeigt werden, kann der Anwender in der Liste scrollen.
Wenn size="1" beträgt oder das Attribut fehlt, ensteht eine so genannte „Dropdown-Liste“.

option definiert jeweils einen Eintrag der Auswahlliste. Du kannst so viele Listeneinträge definieren, wie du willst. Der Text des ausgewählten Eintrags (oder – falls gesetzt, der Wert des value-Attributs) wird übertragen, wenn der Anwender das Formular abschickt.

Wenn nichts anderes angeben, ist zunächst kein Eintrag einer Auswahlliste vorselektiert. Du kannst einen Eintrag mit dem selected-Attribut auswählen. Vorselektierte Einträge haben einen sichtbaren Markierungsbalken.

Das zweite Menü im gleichen Beispiel unterscheidet sich in zwei Dingen:

das sizes-Attribut im select-Element fehlt - es wird eine „Dropdown-Liste“ angezeigt.
Das erste option-Element stellt eine empty option dar - es signalisiert, dass noch nichts ausgewählt wurde.
Beim Absenden würde so - im Unterschied zu den anderen Optionen kein Wert mitgesendet, sodass es zu keiner unabsichtlichen Auswahl der 1. Option kommt.

Gliederung mit optgroup

Um mehrere zusammengehörende option-Einträge zusammenzufassen, kann man sie in ein optgroup-Elenent schachteln:

Gliederung mit optgroup ansehen …

  <label for="favorite_3">Künstler(in)</label>
  <select id="favorite_3" name="favorite_3">
    <option>Wähle deinen Favoriten!</option>

    <optgroup label="Schlager">
      <option value="heino">Heino</option>
      <option value="rosenberg">Marianne Rosenberg</option>
      <option value="fischer">Helene Fischer</option>
      <option value="kaiser">Roland Kaiser</option>
    </optgroup>

    <optgroup label="Pop/Rock">
      <option value="mj">Michael Jackson</option>
      <option value="waits">Tom Waits</option>
      <option value="hagen">Nina Hagen</option>
      <option value="madonna">Madonna</option>
      <option value="springsteen">Bruce Springsteen</option>
    </optgroup>
  </select>

Das optgroup-Element enthält ein label-Attribut dessen Text fett angezeigt wird, aber nicht angeklickt werden kann.

Das optgroup-Element kann mit CSS formatiert werden, dies gilt dann aber auch für die beinhalteten option-Elemente. Diese kann man aber – wie bei der unteren Gruppe – auch wieder entsprechend zurücksetzen.

Diese klassischen select-Menüs haben mehrere Nachteile:

Als Inhalt der options ist nur Text möglich – keine Bilder und keine Auszeichnungselemente
Eine Gestaltung mit CSS ist nur begrenzt möglich. Sie übernehmen ihr Aussehen vom Betriebssystem des Nutzers. Auf mobilen Geräten werden sie sogar aus der Seite herausgelöst und in einem eigenen Popup dargestellt.

Aufgrund dieser Probleme wichen Entwickler oft auf die oben vorgestellten versteckten Radio-Buttons, auf Lösungen mit klickbaren span-Elementen, die oft nicht zugänglich waren, oder auf in jedem Framework anders realisierte proprietäre Menüs aus.

customizable selects

Browserunterstützung
caniuse.com

Die open-ui-Initiative hat es sich zum Ziel gemacht, für solche UI-Anwendungen standardisierte Lösungen mit nativen Elementen zu entwickeln.

Das neue stylbare select (customizable select) ist nach dem erfolgreichen popover und dem name-Attribut für details ihr drittes Projekt.^[5]^[6]

Heute (Stand Oktober 2025) kommen Nutzer von Chrome, Edge und Opera bereits in den Genuss des neuen Aussehens, im Safari und Firefox werden die Select-Menüs wie bisher dargestellt – graceful degradation.

Zum neuen select umschalten ansehen …

select,
::picker(select) {
  appearance: base-select;
}

Die CSS-Eigenschaft appearance (engl. Aussehen, Erscheinung) ermöglicht es, Formularelementen ihr betriebssystemspezifisches Aussehen zu nehmen. Mit dem neuen Wert base-select wird das neue select ausgelöst und man kann das Menü nun nach Wunsch stylen.

Struktur und Aufbau

Um das Aussehen möglichst flexibel zu gestalten, kann man nun innerhalb des select viele Elemente verwenden.

Button und selectedcontent ansehen …

<form>
<label for="currency-select">Währung:</label>
<select name="currency-select" id="currency-select">
  <button class="btn-to-open-select">
    <selectedcontent></selectedcontent>
  </button>
  <option value="eur">
    <img src="Flag_of_Europe.svg" alt="">
    Euro
    <span class="symbol" aria-hidden="true">€</span>
  </option>
  <option value="gbp">
    <img src="Flag_of_the_United_Kingdom.svg" alt="">
    Pound Sterling
    <span class="symbol" aria-hidden="true">£</span>
  </option>
  <option value="usd" selected>
    <img src="Flag_of_the_United_States.svg" alt="">
    US Dollar
    <span class="symbol" aria-hidden="true">$</span>
  </option>
</form>

Das Beispiel-Markup entspricht weitgehend dem klassischen select-Markup.

Neu ist ein möglicher button als erstes Kind des select-Menüs. Es wird in das ShadowRoot des <select>-Elements eingefügt und öffnet die Popup-Liste mit Optionen. Wenn im Markup kein <button>-Element vorhanden ist, wird eine Schaltfläche mit dem Text der aktuell ausgewählten <option>-Option gerendert, genau wie beim alten <select>-Element.

<button>
  <selectedcontent></selectedcontent>
</button>

Durch das Hinzufügen des selectedcontent-Elements klont der Browser die aktuell ausgewählte <option> im Button, für die du dann benutzerdefinierte Stile festlegen kannst.

Innerhalb von option sind nun weitere Textauszeichnungs-Elemente und externe Bilder erlaubt.
In Browsern, die dies noch nicht unterstützen, wird der Text als plain text dargestellt.
Deshalb wird das Währungs-Symbol mit aria-hidden versteckt, damit es nicht doppelt angezeigt oder vorgelesen wird.

Screenshot eines select mit rich text im Firefox 144 und im Chrome 144
Im Firefox (und im Safari) wird der Inhalt der option-Elemente als plain text dargestellt.

Daneben gibt es viele Pseudoelemente, die mit CSS gestaltet werden können:

select ist das übergeordnete Element. Es fungiert auch als Schaltfläche, auf die man klickt, um die Auswahl zu öffnen.
::picker(select) ist ein Shadow-DOM-Element, das die Optionen enthält.
option::checkmark enthält das Häkchen der ausgewählten Option.
select::picker-icon enthält das Pfeilsymbol (▼) in der Schaltfläche, mit der der Picker geöffnet wird.
selectedcontent ist ein Element, das man innerhalb von select verwenden kann, um den inneren HTML-Code der aktuell ausgewählten Option widerzuspiegeln.
select:open formatiert die Schaltfläche „Auswählen“, wenn der Picker geöffnet ist.
option:checked formatiert eine ausgewählte Option im Picker.

::picker-icon und ::checkmark

Wie in der oberen Infografik ersichtlich, gibt es neben den HTML-Elementen noch weitere Pseudoelemente, die man über entsprechende Selektoren gestalten kann:

Pseudoelemente gestalten ansehen …

selectedcontent {
  grid-template-columns: 1.5em 10em 2em 1.5em; /* flag | text | symbol | picker-icon */
}

select::picker-icon {
  color: green;
}

select:open::picker-icon {
  color: steelBlue;
}

select option::checkmark {
    content: "✔";
		color: steelBlue;
		font-size: 1.5em;		
		font-weight: bold;
}

Das selectedcontent-Element kopiert ja den Inhalt des ausgewählten option-Elements. Dabei soll der Platz für den Checkmark aber für das Flaggen-Symbol verwendet werden, sodass wir die Breite der Spalten umsortieren.

Rechts befindet sich das Picker-Icon, das wir mit dem gleichnamigen Selektor formatieren.

Links neben der ausgewählten option befindet sich ein weiteres Pseudoelement, das anzeigt, welche option ausgewählt ist. Mit ::checkmark können wir das Aussehen gestalten.

multiple und size

Die Attribute multiple und size sind im neuen select noch nicht implementiert.

Beachte: Eine Mehrfachauswahl ist für Anwender oft nicht erkennbar. Auch ist nicht allen Anwendern klar, wie sie mehrere Einträge selektieren können.
Du solltest deshalb für eine Mehrfachauswahl nicht select, sondern besser Checkboxen verwenden.

Falls du für eine spezielle Zielgruppe dennoch Mehrfachauswahl verwendest, solltest du darauf hinweisen, dass mehrere Einträge auswählbar sind. Auf modernen PC-Tastaturen geschieht das normalerweise durch Halten der STRG-Taste bei gleichzeitigem Anklicken der gewünschten Listeneinträge. Macintosh-Benutzer verwenden dafür die Befehlstaste (⌘ / Command key).

Absendewert von Einträgen bestimmen

Normalerweise wird beim Absenden des Formulars der Text eines ausgewählten Listeneintrags übertragen, der zwischen <option> und </option> notiert ist.

Um für einen Eintrag der Auswahlliste einen anderen Absendewert zu bestimmen, gib im einleitenden <option>-Tag des betreffenden Eintrags das value-Attribut an (value = Wert). Als Wert weist du den gewünschten Absendewert zu. Beim Absenden des Formulars wird dann der hier bestimmte Text eines ausgewählten Eintrags übertragen, nicht der Text, der dem Anwender beim Listeneintrag angeboten wurde.

T-Shirt-Konfigurator ansehen …

  <label for="color-select">Wähle die Farbe:</label>
  <select name="color-select" id="color-select" class="color-select">
    <button class="btn-to-open-select">
      <selectedcontent></selectedcontent>
    </button>

    <option value="black" selected data-img="https://dummyimage.com/300x300/000/fff&text=Black+Tee">
      <span role="decoration" class="swatch" style="background: #000"></span> 
      Schwarz
    </option>
    <option value="red"
            data-img="https://dummyimage.com/300x300/d22/fff&text=Red+Tee">
      <span role="decoration" class="swatch" style="background:var(--red)"></span> 
      Rot
    </option>

Der Konfigurator besteht aus zwei Select-Menüs, mit denen Farben und Größe ausgesucht werden.

Im Farbauswahl-Menü wird für jede option ein swatch (Farbfeld) und der Farbname angezeigt - übertragen wird jedoch der im option-Element notierte value.

Siehe auch

Eingaben mit JavaScript auswerten‏‎
- value-Eigenschaft
- Element ansprechen
- Slider mit Ergebnisausgabe
Verkettete Auswahllisten

Verbindung mehrerer Auswahllisten mit objektorientiertem JavaScript

Weblinks

↑ MDN: Checkboxen mit unbestimmbarem Wert
Mit JavaScript kann man eine Checkbox auf auf inputInstance.indeterminate = true; setzen.
Eine Checkbox im indeterminate-Status hat in den meisten Browsern eine horizontale Linie in der Box anstatt eines Häkchens.
↑ smashing magazine: Simplifying Form Styles With accent-color von Michelle Barker, 23.09.2021
↑ Inclusively Hiding & Styling Checkboxes and Radio Buttons 16 Jun, 2020 (Sara Soueidan)
↑ css-Tricks: Stuff you can do with the “Checkbox Hack”
↑ Customizable Select Element (Explainer) (open-ui.org)
↑ Customizable select elements (developer.mozilla.org)

[1] MDN: Checkboxen mit unbestimmbarem Wert
Mit JavaScript kann man eine Checkbox auf auf inputInstance.indeterminate = true; setzen.
Eine Checkbox im indeterminate-Status hat in den meisten Browsern eine horizontale Linie in der Box anstatt eines Häkchens.

[2] smashing magazine: Simplifying Form Styles With accent-color von Michelle Barker, 23.09.2021

[3] Inclusively Hiding & Styling Checkboxes and Radio Buttons 16 Jun, 2020 (Sara Soueidan)

[4] ss-Tricks: Stuff you can do with the “Checkbox Hack”

[5] Customizable Select Element (Explainer) (open-ui.org)

[6] Customizable select elements (developer.mozilla.org)

[1]

[2]

[3]

[4]

[5]

[6]

Formulare/Auswahllisten

Inhaltsverzeichnis

Radio-Buttons

Checkboxen

Gestaltung mit CSS

Checkboxen mit accent-color gestalten

Radio-Buttons verstecken

Toggle-Schalter

Exkurs: Checkbox-Hack

Auswahllisten mit select

Gliederung mit optgroup

customizable selects

Struktur und Aufbau

::picker-icon und ::checkmark

multiple und size

Absendewert von Einträgen bestimmen

Siehe auch

Weblinks

Navigationsmenü

SELFHTML

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Mehr

Suche

Starten

Werkzeuge

Mitmachen