Logo site Des Geeks et des lettres

L'application pour surveiller / sauvegarder vos smartphonesL'oeil inquisiteur de Bibispy

Personnalisation des cases à cocher par une image

Généralement les cases à cocher (ou checkbox en anglais) sont utilisées telles quelles sur un site web, l’effet visuel de la case cochée ou non-cochée est donc laissé à la charge du navigateur utilisé.
checkbox_replacement

Dans mon cas actuellement, le web-designer a décidé d’utiliser une jolie image à la place de celle par défaut dans ses maquettes Photoshop, je dois donc trouver un moyen de mettre cela en place en respectant les contraintes fixées suivantes :

  1. les nouvelles images « checkbox vide » et « checkbox pleine » doivent pouvoir provenir d’images contenues dans un Sprite
  2. le libellé à côté de la checkbox doit être aussi cliquable afin de sélectionner son choix et donc d’afficher l’image vide ou pleine
  3. le template HTML doit être propre afin de respecter les normes d’un formulaire : <input type= »checkbox » name= »type » value= »creature » id= »type-creature » /><label for= »type-creature »>créature</label>
  4. la validation du formulaire associé doit connaître de façon transparente les cases cochées par l’utilisateur

Solutions existantes

Selon les préférences de chaque développeur, la solution se dirigera plutôt vers du pure CSS(3) ou une combinaison de CSS et JavaScript.

Elles ont toutes plus ou moins la même restriction : la compatibilité navigateur, notamment vers les « vieux IE », mais elles méritent le détour tout de même.

Ma solution

Vous l’aurez compris j’en ai fait encore qu’à ma tête, voici ce qu’il en est ressorti en couplant CSS et JavaScript : plutôt simple, plutôt efficace, plutôt compatible 🙂

 

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Greg 23 septembre 2013, 9 09

    Comme d’hab je te fais largement confiance sur ce coup, et à mon avis tu as encore fait du joli travail. GG

    Réponds !

Article suivant:

Article précédent:

Recherche

A vos stylos !

  • Greg: “Ahah. Tu m'étonnes.Déc 8, 21:19
  • Benjamin: “Ahah ! J'aime ces coups de gueule, pour la peine je verrai pas ce film, fuck !Déc 8, 19:52
  • Greg: “Non, j'ai l'impression que Pinterest empêche l'utilisation de plugin annexes (je me trompe peut-être)Déc 8, 18:26
  • danielle: “vous avez réussi à afficher? j'ai le meme problème avec Safari je n'arrive pas à afficher certaines photosDéc 8, 18:12
  • Greg: “Salut Ben, Peut-être, je ne me souvenais plus que tu m'en avais parlé, mais bonne perle sympathique en effet…Déc 7, 21:33
  • etienne minsongo mendo: “Bsr à tousje suis Etienne Minsongo apprenti programmeur! je voudrais savoir: le serveur local XAMPP.... aurait-il des inconvénients?Déc 7, 15:45
Share This