Comment faire des Toggle Switch pour remplacer les checkbox en CSS ?

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 demander un devis sur la page Contact afin d’obtenir de l’aide auprès d’un expert dans le développement web.

Sommaire :

• Construire le Toggle Switch
  • Délimitation de la zone du Toggle Switch
• Masquer  la checkbox
• Ajout de la couleur de fond du Toggle Switch
• Insertion du curseur
• Notre astuce pour construire un Toggle Switch en CSS

N’hésitez pas a prendre contact, et recevez un devis gratuitement en 15 minutes.

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>

HTMLCopy

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;
}

CSSCopy

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;
}

CSSCopy

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;
}

CSSCopy

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;
}

CSSCopy

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;
}

CSSCopy

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;
}

CSSCopy

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 de nos experts en la matière via le formulaire.

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