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 :
:before, :after et :checked ;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.
Sommaire :
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.
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 :
cursor.overflow: hidden. Nous expliquerons cela dans la prochaine étape.
.switch {
display: inline-block;
position: relative;
width: 70px;
height: 40px;
cursor: pointer;
overflow: hidden;
}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 !
À 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;
}
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.
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.