Il n’y a pas de secret, un site moderne et design est plus attrayant. Une astuce pour rendre votre site plus agréable à regarder est de transformer vos inputs checkbox (ou cases à cocher) en bouton appelés « Toggle switch ». Nous verrons dans ce tutoriel comme faire des Toggle Switch en CSS pour remplacer vos checkbox.

Voici un exemple de rendu que l’on aura à la fin du tutoriel :

Pré-requis : maîtriser le CSS, notamment :

  • le positionnement absolut/relatif ;
  • les pseudo-éléments :before, :after et :checked ;
  • le sélecteur « + ».

Si ces notions ne sont pas claires pour vous, vous pouvez gratuitement déposer une annonce sur Codeur.com afin d’obtenir de l’aide auprès d’un développeur CSS freelance spécialisé dans le développement web.

 

Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.

Intégration HTML

Personnalisation de page web

Création d'animations CSS

Ajout de formulaires

Trouver un développeur web

Construire le Toggle Switch

Avant le commencement, il n’y avait rien. Puis, est arrivé le HTML. D’abord, une balise label qui pour être sémantiquement correct et permettre de cliquer sur toute la zone dédiée à notre Toggle Switch. Ce label sera accompagné d’une classe pour l’identifier, nous l’appellerons switch. À l’intérieur de celui-ci, deux éléments : notre case à cocher, un input et de type « checkbox » ; puis une balise span qui fera office de curseur.


<label class="switch">
	<input type="checkbox" />
	<span></span>
</label>

Maintenant, nous allons pouvoir monter notre CSS tranquillement.

Délimitation de la zone du Toggle Switch

La première chose à faire est de délimiter la zone du Toggle Switch, en lui indiquant des dimensions.

Petits détails à prendre en compte :

  1. Ce n’est pas ici que l’on gère la couleur ni la décoration.
  2. En prévision de l’ajout du curseur, nous allons également indiquer l’élément comment étant du relatif.
  3. Afin d’indiquer à l’utilisateur que l’on peut cliquer dessus, nous allons ajouter d’indiquer l’attribut cursor.
  4. Ne pas oublier d’indiquer un attribut overflow: hidden. Nous expliquerons cela dans la prochaine étape.

.switch {
	display: inline-block;
	position: relative;
	width: 70px;
	height: 40px;
	cursor: pointer;
	overflow: hidden;
}

Masquer  la checkbox

Avec un carré au milieu de votre nouveau bouton, ce n’est pas forcément très design. Nous allons donc le masque.


.switch input {
	position: absolute;
	top: -30px;
	left: -30px;
	width: 0;
	height: 0;
}

Les inputs checkbox sont capricieux. Ils réagissent différemment selon le navigateur ou l’OS de l’appareil. Par exemple, avec iOS, il est impossible de changer la taille. Sur certains navigateurs, il est impossible de les masquer. L’une des méthodes le plus efficace reste de le déplacer avec du positionnement, d’où le fait que son parent soit en overflow: hidden !

Ajout de la couleur de fond du Toggle Switch

À présent, rajoutons la couleur de fond. La première chose à laquelle on pense, c’est de mettre un background à la classe switch. Grave erreur, car la couleur sera statique. Or, ce que l’on souhaite, c’est changer la couleur du fond en fonction de l’état de l’input.

Ce que l’on va ainsi faire, c’est utiliser le troisième élément HTML : le span.


.switch input + span {
 	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #99b4df;
	border-radius: 20px;
}

Puis, nous allons modifier la couleur de fond quand le checkbox est coché, en utilisant le pseudo-élément:checked.


.switch input:checked + span {
	background: #346abf;
}

Insertion du curseur

Au niveau du curseur, nous n’allons pas rajouter de nouvels éléments HTML. Cela ferait beaucoup trop pour si peu. Nous allons plutôt utiliser le pseudo-élément:before du span déjà en place.


.switch input + span:before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 4px;
	width: 32px;
	height: 32px;
	background: white;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: all .5s;
}

Pour terminer, il ne nous reste plus qu’à déplacer ce curseur quand le checkbox est valide.

Mauvaise pratique :

Pour aller au plus simple, il serait plus simple d’annuler le positionnement de gauche avec left: auto; puis de définir la position de droite en utilisantright: 4px;.

Le problème de cette méthode est que la transition ne sera pas prise en compte, et qu’il n’y aura pas de déplacement animé.

Bonne pratique :

Il va falloir faire un peu de mathématiques.

Le Toggle Switch et le curseur mesurent respectivement 70 et 32 pixels de largeur. On veut 4 pixels de libre sur le côté.

Donc, 70 – 32 – 4 = 34.

Nous allons donc attribuer un left de 34 pixels au curseur quand le checkbox est actif.


.switch input:checked + span:before {
	left: 34px;
}

 

Vous pouvez voir le résultat complet sur Codepen.

 

Notre astuce pour construire un Toggle Switch en CSS

Avec ces exemples, vous n’avez pas besoin d’utiliser de JavaScript, ni d’importer de librairies lourdes qui ralentissent votre site internet. Vous pouvez également modifier facilement les couleurs et les dimensions.

Si la mise en place d’un Toggle Switch en CSS est trop compliquée, ou que vous peinez à assimiler certains points du tutoriel, vous pouvez demander l’intervention d’un développeur CSS freelance en déposant gratuitement une annonce sur Codeur.com.

Nous verrons dans de futurs tutoriels des applications utiles aux Toggle Switch.