Remplacer radio bouton par une image
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:
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:
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?
