Input checkbox, bouton toggle

On peut styliser un input type checkbox en un joli bouton toggle. Cela se fait en javascript pour insérer et envelopper l’input avec des éléments label et span.

Deux boutons toggles agrandis sur fond de fête de ballons montgolfières dans les monts Sandia à Albuquerque au soleil couchant

L’élément input a la classe toggle :

Deux boutons toggle et un select

Javascript

Dans un fichier javascript, on sélectionne les élements portant la classe toggle, on crée, pour chacun, un élément label dans lequel on insère la checkbox que l’on cachera, et un élément span que l’on stylisera pour représenter le bouton on/off. On écrit :

Style

On style ensuite en SASS :

Il ne reste plus qu’à importer la feuille de style, que l’on appelle _toggle.scss :

On peut aussi, grâce à SASS, préfixer les propriétes CSS par un identifiant :

Et hop, un joli bouton toggle ou switch pour les formulaires contenant des boîtes à cocher.

U La classe et le bouton s’appelle toggle bascule, basculer, et non toogle, cela m’arrive très souvent, et l’on cherche l’erreur partout sans la trouver.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.