Comment puis-je remplacer les images de cases à 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

Dans un tableau HTML avec une liste de cases à cocher, vous souhaiterez peut-être remplacer l'image de case à cocher par défaut par des images activées/désactivées personnalisées. CSS peut être exploité pour obtenir cette amélioration esthétique.

Technique de saisie personnalisée CSS

Comme mentionné par "CSS ninja", une approche consiste à utiliser une pseudo-classe pour styliser l'étiquette associée à la case à cocher, plutôt que la case à cocher elle-même. Cela garantit que l'image est affichée dans la bonne position et répond à l'état de la case à cocher.

Implémentation du code CSS

Vous trouverez ci-dessous le code CSS complet qui masquera la case à cocher réelle et l'associera à une étiquette stylisée :

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  display: block;
  width: 16px;
  height: 16px;
  background: url('/images/off.png') 0 0px no-repeat;
}

input[type="checkbox"]:checked + label {
  background: url('/images/on.png') 0 0px no-repeat;
}

Voici une répartition du code :

• Le la case à cocher (input[type="checkbox"]) est masquée à l'aide de display: none;.
• L'étiquette associée à la case à cocher (input[type="checkbox"] label) est conçue pour avoir un affichage en bloc, une largeur et une hauteur de 16px, et une image de fond de l'image d'état "off".
• Lorsque la case est cochée (input[type="checkbox"]:checked), une nouvelle image de fond de l'image d'état "on" est appliquée à l'étiquette.

Résultat

Ce code CSS remplacera avec succès l'image de la case à cocher par défaut par des images marche/arrêt personnalisées, vous donnant un aspect plus visuel liste de cases à cocher attrayante et personnalisable. Vous pouvez expérimenter différentes conceptions d'images pour correspondre à l'esthétique spécifique de votre conception Web.

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!