SelfHTML Wiki: Toggle-Schalter und :focus-Umrandung

[der müde mümmler]

Hiho!

Ich habe gerade mal die Wiki-Version des Toggle (flip-flop) Schalters statt Checkbox ausprobiert. Dabei ist mir aufgefallen, dass beim Durchschalten mit TAB die neu erstellten Schalter bei Status :focus nicht umrandet werden. (in Opera zumindest)

Habe also ein wenig herumgespielt, und wenn man statt

 input { display: none; }

die checkbox mit

 input { opacity: 0; }

"ausblendet", dann klappt's auch mit dem Nachb der visuellen Darstellung und der toggle-Schalter wird umrandet, wenn das Element focus hat.

Nur: hat das irgendwelche "side effects"? Andere Browser?

Die Wiki-Version hat jedenfalls den Nachteil, dass der Fokus plötzlich verschwindet und wieder auftaucht, was verwirrend ist.

[Matthias Scharwies]

Servus!

Hiho!

Ich habe gerade mal die Wiki-Version des Toggle (flip-flop) Schalters statt Checkbox ausprobiert. Dabei ist mir aufgefallen,

Nur: hat das irgendwelche "side effects"? Andere Browser?

Vielen Dank für deinen Verbesserungsvorschlag!

Das ganze Beispiel ist nicht so optimal- deshalb hatten wir den im Artikel verlinkte Custom element <toggle-switch> gebaut.

Das müssen wir noch diskutieren, ob man den CSS-Schalter dann depubliziert.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

ich glaube, beide Ansätze haben ihre Existenzberechtigung. Ein custom element ist technisch anspruchsvoller, nicht jeder möchte sich damit auseinandersetzen.

Rolf