Animer une checkbox avec CSS

Animer ses checkboxs dans ses formulaires peut grandement améliorer l'expérience qu'auront vos utilisateurs et permet indéniablement d'augmenter leur envie de les remplir. Un formulaire plus sympa à remplir est un formulaire que vos utilisateurs rempliront plus souvent. Voyons dans cet article comment faire pour animer une checkbox avec CSS !

1ère étape

Le code HTML

<label class="checkbox">
  <input class="checkbox_input" type="checkbox">
  <svg class="checkbox_check" width="25" 
height="25">
    <polyline points="20 6 9 17 4 12"></polyline>
  </svg>
</label>

Dans l’étape précédente, nous utilisons deux balises assez originales : svg et polyline.

La balise svg permet de créer une nouvelle forme svg, qui est une représentation mathématique d’une image.

La balise polyline permet justement de préciser les points de la forme svg. Une fois reliés, ces points donnent une forme en forme de validation.

2ème étape

Stylisons le label et la checkbox.

.checkbox {
  cursor: pointer;
}

.checkbox:hover .checkbox_check {
  background: #ff4754;
}

.checkbox_input {
  width: 0;
  height: 0;
  opacity: 0;
}

Dans l’étape précédente, nous cachons la checkbox par défaut créée par notre navigateur avec la balise input.

Nous souhaitons uniquement afficher notre propre checkbox façonnée de toute pièce. Grâce à la balise label, une fois que nous cliquerons sur notre checkbox façonné de toute pièce, la véritable checkbox que nous venons de cacher sera checké.

3ème étape

Passons au style de la checkbox lorsque celle-ci est cochée !

.checkbox_input:checked + .checkbox_check {
  background: #ff4754;
  stroke-dashoffset: 0;
}

La propriété stroke-dashoffset permet de décaler la forme svg que nous venons de créer. Ici, nous la mettons à sa position initiale : 0. Nous voyons donc la forme.

4ème étape

Stylisons maintenant la checkbox que nous avons façonnée de toute pièce.

.checkbox_check {
  border: 0.2rem solid #ff4754;
  stroke: #f9f9f9;
  stroke-dasharray: 25;
  stroke-dashoffset: 25;
  stroke-linecap: round;
  stroke-width: 0.2em;
  border-radius: 0.2em;
  fill: none;
  transition: background 0.4s, stroke-dashoffset 
0.6s;
}

Dans l’étape précédente, nous utilisons plusieurs propriétés qui peuvent vous décontenancer un peu. Pourtant, vous allez voir que tout est très simple, gardez juste en tête que nous stylisons notre checkbox non cochée.

• stroke : la couleur de la forme svg
• stroke-dasharray : la taille de la forme (si on vulgarise beaucoup)
• stroke-dashoffset : le décallage de la forme svg, ici nous la cachons car elle fait 25px. Or nous la décalons de 25px : on ne la voie donc pas.
• stroke-linecap : le style de la ligne que nous avons créé (notre forme svg n’est qu’une ligne, ici nous demandons à ce qu’elle soit arrondie sur les côtés)
• stroke-width : la taille de la ligne de la forme
• fill : la couleur de remplissage de la forme