einfacher Button

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Der Charme an Radiobuttons wäre, das zwei Labels (d.h. beide benötigte Texte) im Markup vorhanden sind. Bei meiner Lösung mit der Checkbox steht ein Text im Markup, der andere im Stylesheet. Schön ist das nicht.

Dummerweise will man den Text des Labels des angewählten Radiobuttons anzeigen und das andere Label verstecken. Geht aber nicht, weil man zum Umschalten eben gerade das Label des nicht angewählten Radiobuttons braucht.

Aber auch dafür gibt es eine Lösung – in Browsern, die pointer-events unterstützen:

Beide Labels werden an der selben Stelle positioniert; das Label des ausgewählten Radiobuttons erhält einen höheren z-Index, verdeckt also das andere, somit ist nur der Text lesbar, der den aktuellen Status angibt.

Zusätzlich wird mit pointer-events: none dafür gesorgt, dass man das Label des aktuell gewählten Radiobuttons nicht clicken kann, sondern der Click auf das Label des anderen Radiobuttons zielt.

LLAP 🖖