HTML - Auswahllisten mit Mehrfachauswahl ähnlich Checkbox?
Hallo,
gibt es eine HTML-Auswahlliste, deren Einträge wie eine Art Checkbox ausgewählt und wieder abgewählt werden können?
Aktuell verwende ich eine "select"-Auswahlliste mit dem Attribut "multiple". Um mehrere Einträge zu markieren muss ich damit aber die "Umschalt"- oder "Shift"-Taste drücken.
Perfekt wäre es, wenn die Auswahl eines Eintrags mit jedem Klick toggelt.
Danke
mabue
gibt es eine HTML-Auswahlliste, deren Einträge wie eine Art Checkbox ausgewählt und wieder abgewählt werden können?
Aktuell verwende ich eine "select"-Auswahlliste mit dem Attribut "multiple". Um mehrere Einträge zu markieren muss ich damit aber die "Umschalt"- oder "Shift"-Taste drücken.
Perfekt wäre es, wenn die Auswahl eines Eintrags mit jedem Klick toggelt.
Danke
mabue
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 246583
Url: https://administrator.de/forum/html-auswahllisten-mit-mehrfachauswahl-aehnlich-checkbox-246583.html
Ausgedruckt am: 06.04.2025 um 11:04 Uhr
4 Kommentare
Neuester Kommentar
Hi,
was spricht denn gegen Checkboxen !?
Mit CSS lässt du die Input-Felder ausblenden und gibst den Labels gewünschte Hintergrundfarben,bilder, schriftgröße,arten,farben,ect.
unter anderem
Die Labels dann noch eckig machen, rahmenfarbe und schon siehts wie ein Select aus bloß ohne Scrollbalken...
...wenn man das noch in ein DIV steckt und diesen aus "overflow:scoll" setzt... dan... könnte man mal probieren
Kontra JS
PRO CSS
~Arano
was spricht denn gegen Checkboxen !?
<input type="checkbox name="lieblingsfarben" id="aw1" value="r"><label for=aw1">Rot</label>
<input type="checkbox name="lieblingsfarben" id="aw2" value="g"><label for=aw2">Grün</label>
<input type="checkbox name="lieblingsfarben" id="aw3" value="b"><label for=aw3">Blau</label>
Mit CSS lässt du die Input-Felder ausblenden und gibst den Labels gewünschte Hintergrundfarben,bilder, schriftgröße,arten,farben,ect.
unter anderem
/* mit einer CSS-Class wäre es besser / übersichtlicher */
input[type="checkbox"] { display:none; }
input[type="checkbox"] label { /* normal */ }
input[type="checkbox"]:hover label { /* normal mouseover */ }
input[type="checkbox"]:checked + label { /* ausgewählt */ }
input[type="checkbox"]:cheched:hover + label { /* ausgewählt mouseover */ }
Die Labels dann noch eckig machen, rahmenfarbe und schon siehts wie ein Select aus bloß ohne Scrollbalken...
...wenn man das noch in ein DIV steckt und diesen aus "overflow:scoll" setzt... dan... könnte man mal probieren
Kontra JS
PRO CSS
~Arano
Moin,
schließe mich @Arano an. Hier ein Beispiel wie es nach seinem Vorschlag aussehen könnte: http://jsfiddle.net/7bfnqj65/1/
(nur die Pseudoklassen muss man auf den Label setzen)
Grüße Uwe
schließe mich @Arano an. Hier ein Beispiel wie es nach seinem Vorschlag aussehen könnte: http://jsfiddle.net/7bfnqj65/1/
(nur die Pseudoklassen muss man auf den Label setzen)
Grüße Uwe