Remplacement de l'image des cases à cocher par une pure CSS

Question

J'ai une liste de cases à cocher dans un tableau. (une parmi un certain nombre de CB sur la ligne)

 <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 on/off personnalisées et je me demandais si quelqu'un avait une meilleure compréhension de la façon de faire cela avec CSS ?

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

D'après ce que je sais, 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 la feuille de style CSS ci-dessus, la case à cocher afficherait au moins par défaut l'image à l'état OFF, puis j'ajouterais ce qui suit pour obtenir l'état 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 me manquer quelque chose (les images sont de taille 16x16 si cela a de l'importance).

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

EDIT : J'avais manqué quelque chose dans le tutoriel où il applique le changement d'image à l'étiquette et non à l'entrée elle-même. Je n'obtiens toujours pas l'image permutée attendue pour le résultat de la case à cocher sur la page, mais je pense que je m'en approche.

Answer 1

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/

Answer 2

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

En utilisant :before vous pouvez le faire en deux lignes de CSS. (sans script impliqué).

Un autre avantage de cette approche est qu'elle ne s'appuie pas sur <label> et fonctionne même si elle est absente.

Remarque : dans les navigateurs ne prenant pas en charge les CSS3, les cases à cocher auront un aspect normal. (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/

Answer 3

Si vous êtes toujours à la recherche de plus de personnalisation,

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

Merci

Answer 4

J'ai le même problème avec les cases à cocher et les boutons radio qui sont trop petits. Les méthodes ci-dessus ne fonctionnent pas tout à fait. Voici article offre une solution améliorée.