Discussion :

[xave]

Bonjour les gens,

J'essaie de remplacer dans un formulaire des radio boutons par des images, je suis pas loin de la solution mais il me manque un petit quelque chose encore, voici mon code:

Pour la partie html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input id="edit-submitted-choix-langue-1" class="form-radio" type="radio" value="fr" name="submitted[choix_langue]">
<label class="option" for="edit-submitted-choix-langue-1">Français </label>

Pour le CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
input[id="edit-submitted-choix-langue-1"] + label {display:none; }
 
 input[id="edit-submitted-choix-langue-1"] + label  {
    display:inline-block;
    width: 50px; /* largeur image */;
    height:50px; /* hauteur image */;
    background-size: 50px 50px;
    background-image:url(images/monimage.gif); /* état non sélectionné */
}

Et voilà où se situe le problème: mon image s'affiche bien, par contre le bouton en lui même, ainsi que le texte qui y est associé, en l’occurrence ici "Français" s'affichent également par dessus l'image.

Du coup la question est: comment les supprimer de l'affichage?

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

input[id="edit-submitted-choix-langue-1"] + label {display:none; }

Tu es vraiment sûre de ce sélecteur ? D'autant que la règle est contredite par la suivante dans ton code...

Et au passage, input[id="edit-submitted-choix-langue-1"], il y a une raison cohérente pour se passer d'un sélecteur d'id #edit-submitted-choix-langue-1 ?

[xave]

Ben je sais bien... j'étais un peu surprise aussi mais l'exemple de code que j'ai trouvé pour se faire est fait comme ça...

Non, pas spécialement de raison cohérente, j'ai juste fait ma feignasse en attendant de trouver la bonne solution et ensuite de cleaner mon code

[Bovino]

input[id="edit-submitted-choix-langue-1"] + label ça correspond à la balise <label> suivant la balise <input> dont l'attribut id vaut edit-submitted-choix-langue-1, or toi, ce que tu veux masquer, c'est la balise <input>, pas <label>.

[xave]

Oui, j'avais déjà modifié dans ce sens suite à ta première réponse, effectivement c'est mieux mais il me superpose quand même toujours "Français" à l'image

[xave]

Voilà, il me manquait juste un petit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 text-indent: -9999px;

et le tour est joué!

Merci pour tout Bovino