web-dev-qa-db-fra.com

Remplacement d'image de pure case à cocher CSS

J'ai une liste de cases à cocher dans un tableau. (un des nombreux CB sur la rangée)

 <tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'>&nbsp;</label></td></tr>

J'aimerais remplacer l'image de la case à cocher par une paire d'images activées/désactivées personnalisées et je me demandais si quelqu'un comprenait mieux comment procéder avec CSS.

J'ai trouvé ce tutoriel "CSS ninja", mais je dois admettre que je le trouve un peu complexe. http://www.thecssninja.com/css/custom-inputs-using-css

Autant que je sache, vous êtes autorisé à utiliser une pseudo-classe

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

Je pensais qu'en ajoutant le CSS ci-dessus, la case à cocher afficherait au moins l'image à l'état désactivé, puis j'ajouterais ce qui suit pour obtenir le statut ON.

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

Malheureusement, il semble que je manque une étape critique quelque part. J'ai essayé d'utiliser la syntaxe de sélecteur CSS3 personnalisée pour correspondre à ma configuration actuelle - mais il doit manquer quelque chose (Les images sont de taille 16x16 si cela compte)

http://www.w3.org/TR/css3-selectors/#checked

EDIT: Il me manquait quelque chose dans le tutoriel où il applique le changement d'image à l'étiquette et non l'entrée elle-même. Je ne reçois toujours pas l'image permutée attendue pour le résultat de la case à cocher sur la page, mais je pense être plus proche.

csscss3checkboxcss-selectors
76
Alex C

Vous êtes déjà proche. Veillez simplement à masquer la case à cocher et à l’associer à une étiquette que vous stylisez via input[checkbox] + label

Code complet: http://Gist.github.com/592332

JSFiddle: http://jsfiddle.net/4huzr/

121
arbales

L'utilisation de javascript semble être inutile si vous choisissez CSS3.

En utilisant :before _ sélecteur, vous pouvez le faire en deux lignes de CSS. (pas de script impliqué).

Un autre avantage de cette approche est qu’elle ne repose pas sur <label> tag et fonctionne même s'il manque.

Remarque: dans les navigateurs ne prenant pas en charge CSS3, les cases à cocher seront normales. (rétrocompatible).

input[type=checkbox]:before { content:""; display:inline-block; width:12px; height:12px; background:red; }
input[type=checkbox]:checked:before { background:green; }​

Vous pouvez voir une démo ici: http://jsfiddle.net/hqZt6/1/

et celui-ci avec des images:

http://jsfiddle.net/hqZt6/6/

36
Mo Valipour

Si vous recherchez toujours plus de personnalisation,

Consultez la bibliothèque suivante: https://lokesh-coder.github.io/pretty-checkbox/

Merci

3
Vylson silwr