Ce snippet permet de substituer la classique case à cocher par un interrupteur à bascule moderne et soigné. Grâce à l’utilisation des pseudo-éléments CSS et de la pseudo-classe :checked, vous obtenez une animation fluide sans la moindre ligne de JavaScript.

Code

<label class="custom-toggle">
  <input type="checkbox" class="custom-toggle-input" aria-label="Toggle Switch" />
  <span class="custom-toggle-slider"></span>
</label>
/* Conteneur de l'interrupteur */
.custom-toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Masquer la case à cocher par défaut */
.custom-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Arrière-plan du curseur */
.custom-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e2e8f0;
  transition: background-color 0.4s;
  border-radius: 34px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Poignée du curseur */
.custom-toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Couleur de fond lors de la sélection */
.custom-toggle-input:checked + .custom-toggle-slider {
  background-color: #3b82f6;
}

/* Contour lors du focus au clavier */
.custom-toggle-input:focus-visible + .custom-toggle-slider {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Déplacement de la poignée lors de la sélection */
.custom-toggle-input:checked + .custom-toggle-slider:before {
  transform: translateX(26px);
}

Points d’implémentation

L’apparence de la case à cocher native <input type="checkbox"> varie d’un navigateur à l’autre et reste difficile à personnaliser. Dans cet exemple, nous la masquons visuellement pour reconstruire l’interface de l’interrupteur grâce à un élément <span> adjacent faisant office de curseur.

  1. Masquage de la case à cocher : En réglant opacity: 0 ainsi que sa largeur et sa hauteur à 0, on conserve ses fonctionnalités tout en la rendant invisible à l’écran.
  2. Design du curseur : Le pseudo-élément ::before est mis à profit pour façonner le bouton circulaire (la poignée).
  3. Animation fluide : L’utilisation de transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) confère un effet d’assouplissement très agréable, où la poignée rebondit légèrement en fin de course.
  4. Accessibilité : L’attribut :focus-visible permet d’afficher un contour clair, garantissant ainsi que l’élément mis en évidence reste bien perceptible lors d’une navigation au clavier.

Cet interrupteur s’avère particulièrement pertinent dès lors qu’une action binaire (on/off) intuitive est nécessaire, notamment dans les panneaux de configuration ou pour activer un mode sombre.