Comment remplacer les images de case à cocher par défaut par des images activées/désactivées personnalisées à l'aide de Pure CSS ?

Remplacement d'image de case à cocher CSS pur

Pour votre liste de cases à cocher, votre objectif est de remplacer les images de case à cocher par défaut par des images activées/désactivées personnalisées à l'aide de CSS .

Pour y parvenir, suivez ces étapes :

1. Masquer la case à cocher d'origine :

   • Utiliser l'affichage CSS : aucun ; propriété pour masquer la case à cocher native.

2. Créer une étiquette personnalisée :

   • Positionner une étiquette à côté de la case à cocher masquée en utilisant la saisie de l'étiquette.
   • Cette étiquette sera responsable de l'affichage de votre personnalisation images.

3. Stylisez l'étiquette avec des images d'arrière-plan :

   • Utilisez l'image d'arrière-plan et l'entrée[type=checkbox ] : pseudo-classe cochée pour basculer entre l'activation et la désactivation images.

4. Positionnez correctement les images :

   • Ajustez la propriété background-position pour aligner correctement les images dans le étiquette.

Code CSS complet Exemple :

input[type=checkbox] {
  display: none; /* Hide the checkbox */
}

input[type=checkbox] + label {
  display: inline-block; /* Position the label next to the checkbox */
  width: 16px; /* Width of the label = Width of the checkboxes */
  height: 16px; /* Height of the label = Height of the checkboxes */
  background-image: url('/images/off.png'); /* Default to "off" image */
  background-position: 0 0;
}

input[type=checkbox]:checked + label {
  background-image: url('/images/on.png'); /* Change image to "on" image when checked */
}

Remarque : Assurez-vous que les chemins d'accès à vos images personnalisées sont corrects. Reportez-vous au JavaScript Fiddle and Gist fourni pour un exemple de travail complet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!