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.
Inhaltsverzeichnis
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.
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 Attributchecked
, 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.
<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 Attributchecked
-
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:
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]
#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]
<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.
.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-Kombinator
input: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.
<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.
.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.
.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.
.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.
Information: Toggle-Switch
Dieses Beispiel ist universell einsatzfähig und benötigt kein JavaScript. Allerdings müssten die Klassen noch einmal angepasst werden, damit sie nicht mit CSS-Festlegungen für andere Checkboxen kollidieren.Zweites Problem: Toggles innerhalb von Formularen übertragen ihren Zustand beim Absenden mit.
Deshalb gibt es immer mehr Rufe nach einem eigenen Element, in dem dies gekapselt ist.
Siehe auch:
- Web Components
- SELF-Blog: <toggle-switch> - Kippschalter mit Custom Elements vom 31.10.2024
Exkurs: Checkbox-Hack
Achtung!
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
-- Matthias Scharwies (Diskussion) 08:36, 2. Jan. 2021 (CET)
<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;
}
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.
<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:
<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
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]
In Chrome, Edge und Opera (Stand September 2025) kannst du die Implementation bereits testen.
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
<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, mit folgenden Unterschieden:
- Die Struktur
<button><selectedcontent></selectedcontent></button>
stellt den ausgewählten Eintrag dar. Durch das Hinzufügen des selectedcontent 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 Textauszeichungs-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.
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:
select::picker-icon {
color: green;
}
select:open::picker-icon {
color: steelBlue;
}
select option::checkmark {
content: "✔";
color: steelBlue;
font-size: 1.5em;
font-weight: bold;
}
multiple und size
Die Attribute multiple und size sind im neuen select noch nicht implementiert.
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 Attribut value
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.
<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>
Erklärung und besseres Beispiel folgt
Siehe auch
- JavaScript und Formulare
- JavaScript/DOM/Document/forms/elements/options
- change-Event
Weblinks
- ↑ MDN: Checkboxen mit unbestimmbarem Wert
Mit JavaScript kann man eine Checkbox auf aufinputInstance.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)