Material Style Toggle Switches
Bouton "checkbox" ou "toggle-switch" en pure CSS.
(Celui-ci n’est pas concerné, mais putain arrêtez de mettre "pure-CSS" quand ça inclut 3 tonnes de jQuery. Merde.)
Ensuite, le problème de ce code, c’est qu’il ne permet pas d’ajouter un label, un véritable texte descriptif du bouton. On peut ajouter un span ou autre, mais c’est moyennement acceptable niveau sémantique.
Je vais voir ce que je peux faire, ça doit être possible, mais le problème c’est que le clic sur le texte va déclencher le "check" de la checkbox, action qui normalement (et dans le cas précis de ce "toggle-switch") ne devrait être réservée qu’au bouton lui-même (sous peine de fausse manip).
ÉDIT 20h05 : http://lehollandaisvolant.net/tout/examples/toggle-switch.html
L’astuce est de mettre la barre de fond non pas sur le Label, mais sur le Label::before. Le bouton lui-même est alors le ::after qui glisse dessus.
ÉDIT : une version encore améliorée : c’est responsive, plus accessibles (pas de display:none) et navigable au clavier. Bien-sûr, toujours tout en CSS
http://lehollandaisvolant.net/tout/examples/toggle-switch-2.html
(Celui-ci n’est pas concerné, mais putain arrêtez de mettre "pure-CSS" quand ça inclut 3 tonnes de jQuery. Merde.)
Ensuite, le problème de ce code, c’est qu’il ne permet pas d’ajouter un label, un véritable texte descriptif du bouton. On peut ajouter un span ou autre, mais c’est moyennement acceptable niveau sémantique.
Je vais voir ce que je peux faire, ça doit être possible, mais le problème c’est que le clic sur le texte va déclencher le "check" de la checkbox, action qui normalement (et dans le cas précis de ce "toggle-switch") ne devrait être réservée qu’au bouton lui-même (sous peine de fausse manip).
ÉDIT 20h05 : http://lehollandaisvolant.net/tout/examples/toggle-switch.html
L’astuce est de mettre la barre de fond non pas sur le Label, mais sur le Label::before. Le bouton lui-même est alors le ::after qui glisse dessus.
ÉDIT : une version encore améliorée : c’est responsive, plus accessibles (pas de display:none) et navigable au clavier. Bien-sûr, toujours tout en CSS
http://lehollandaisvolant.net/tout/examples/toggle-switch-2.html