Comment puis-je remplacer les cases à cocher par défaut par des images personnalisées à l'aide de CSS ?

Style de case à cocher CSS personnalisé avec remplacement d'image

Vous avez rencontré un obstacle en remplaçant l'apparence de la case à cocher par défaut par des images personnalisées à l'aide de CSS. Malgré le travail avec le didacticiel CSS Ninja, vous rencontrez toujours des difficultés pour obtenir le résultat souhaité.

Pour clarifier, la technique consiste à styliser l'étiquette associée à la case à cocher, et non la case à cocher elle-même. Cela permet une personnalisation complète de l’image. Cependant, vous devez vous assurer de masquer l'élément de case à cocher lui-même pour éviter d'afficher son apparence native.

Voici une répartition du CSS que vous avez fourni :

td:not(#foo) > input[type=checkbox] + label {
    background: url('/images/off.png') 0 0px no-repeat;
    height: 16px;
    padding: 0 0 0 0px;
}

Ce CSS cible les étiquettes directement associées. avec des cases à cocher dans les cellules du tableau qui n'ont pas l'ID "foo". Il définit l'image d'arrière-plan de l'étiquette sur "off.png", spécifie sa hauteur et son remplissage, et positionne l'image dans le coin supérieur gauche.

Pour définir l'état "on", utilisez ce CSS :

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

Il cible les mêmes éléments que précédemment, mais uniquement lorsque la case à cocher est à l'état coché. Cette règle met à jour l'image d'arrière-plan de l'étiquette en "on.png".

Exemple complet :

Reportez-vous au code complet et à la démo suivants :

• essentiel : http://gist.github.com/592332
• JSFiddle : http://jsfiddle.net/4huzr/

Points clés :

• Masquez toujours la case à cocher en définissant sa propriété d'affichage sur "aucun" .
• Stylisez l'étiquette associée à l'aide de la syntaxe du sélecteur CSS.
• Utilisez la pseudo-classe ":checked" pour différencier entre les états coché et non coché.
• N'oubliez pas de définir la taille et la position de l'image d'arrière-plan dans le style de l'étiquette.

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!