Markup für dreistufigen Klick-Schalter

[Felix Riesterer]

Liebe Mitlesende,

ich suche nach einer HTML+CSS-Lösung für einen Schalter, der drei Zustände der Reihe nach per Klick durchschaltet. Eine Checkbox visuell verstecken und deren Zustand am zugehörigen <label>-Element sichtbar zu machen, kenne und kann ich schon. Da gibt es aber nur zwei Zustände (on/off), ich suche aber nach etwas mit drei Zuständen.

Die "Durchklicken"-Bedienung ist das Wesentliche, denn eine Range definieren kann ich auch, nur eine solche endlos durch alle Werte klicken, mit ein und derselben visuellen Schaltfläche, das kann ich nicht.

Wer weiß Rat?

Liebe Grüße,

Felix Riesterer.

[bobby]

Moin,

Das gleiche wie mir der Checkbox kannst du auch mit Radiobuttons tun (label und checked-Zustand der Radiobuttons). Da hast du die Möglichkeit mehr als 2 Zustände zu wählen.

Gruß Bobby

[Felix Riesterer]

Lieber bobby,

Das gleiche wie mir der Checkbox kannst du auch mit Radiobuttons tun (label und checked-Zustand der Radiobuttons). Da hast du die Möglichkeit mehr als 2 Zustände zu wählen.

so weit habe ich echt noch nicht gedacht! Vielen Dank!

Liebe Grüße,

Felix Riesterer.

[Camping_RIDER]

Aloha ;)

Das gleiche wie mir der Checkbox kannst du auch mit Radiobuttons tun (label und checked-Zustand der Radiobuttons). Da hast du die Möglichkeit mehr als 2 Zustände zu wählen.

so weit habe ich echt noch nicht gedacht! Vielen Dank!

Na hättest du mal das Wiki befragt 😉

Wobei ich es hasse, immer und immer wieder meine unfertige Arbeit zu verlinken, elendiges schlechtes Gewissen! xD

Grüße,

RIDER

P.S.: Man bedenke allerdings, dass das NICHT tastatur-bedienbar ist! - Und selbst wenn man es tastaturbedienbar macht ist die Tastaturbedienung leider immer noch nicht wie der User das für einen Button / Schaltfläche erwartet (da Radio-Buttons anders tastaturbedient werden - wir hatten so eine ganz ähnliche Fragestellung neulich schonmal, schau dir in dem Zusammenhang meinen Fork von Gunnars Lösung mal an). Eine perfekte Lösung hab ich dafür noch nicht gefunden.

[Felix Riesterer]

Lieber Camping_RIDER,

Na hättest du mal das Wiki befragt 😉

meine eigene Hybris hat mich davon abgehalten - ich dachte, den Umfang der Wiki-Inhalte zu kennen...

P.S.: Man bedenke allerdings, dass das NICHT tastatur-bedienbar ist!

Hmm... da muss ich wohl dann noch die Bedienbarkeit unter Touch-Geräten prüfen. seufz

schau dir in dem Zusammenhang meinen Fork von Gunnars Lösung mal an).

Anderer Use-Case. Ganz anderer.

Liebe Grüße,

Felix Riesterer.

[Matthias Apsel]

Hallo Felix Riesterer,

P.S.: Man bedenke allerdings, dass das NICHT tastatur-bedienbar ist!

Hmm... da muss ich wohl dann noch die Bedienbarkeit unter Touch-Geräten prüfen. seufz

Touch sollte kein Problem darstellen. Es verhält sich wie Klick. Das Problem ist – übrigens auch bei der von mir vorgeschlagenen Variante – tatsächlich die nicht vorhandene Möglichkeit, die Auswahl mit der Tastatur vorzunehmen.

Bis demnächst
Matthias

[Martl]

Hallo Felix,

im Prinzip so, einmal rundherum:

<style>
input{display:none;}
input + label{display:none;}
input:checked + label{display:inline-block;color:green;}
input:checked + label + input + label{display:inline-block;}
</style>

<form>
	<input type="radio" name="keiner" id="eins" checked><label for="eins">eins</label>
	<input type="radio" name="keiner" id="zwei"><label for="zwei">zwei</label>
	<input type="radio" name="keiner" id="drei"><label for="drei">drei</label>
	<input type="hidden" name="keiner"><label for="eins">eins</label>
</form>

Läßt sich bestimmt noch verfeinern.

Grüße, Martl

[Felix Riesterer]

Lieber Martl,

Läßt sich bestimmt noch verfeinern.

JAAA!!! Hurra! (verfeinerte Version)

[EDIT]Vielen herzlichen Dank![/EDIT]

Liebe Grüße,

Felix Riesterer.

[Matthias Apsel]

Hallo Felix,

Läßt sich bestimmt noch verfeinern.

https://wiki.selfhtml.org/wiki/SVG/Tutorials/pointer-events

Bis demnächst
Matthias

[Felix Riesterer]

Lieber Matthias,

https://wiki.selfhtml.org/wiki/SVG/Tutorials/pointer-events?

das spart mir ein <input type="hidden"> und ist damit tatsächlich noch feiner. Danke! Mensch, was es im Wiki mittlerweile für tolle Sachen gibt...

Liebe Grüße,

Felix Riesterer.