28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je suis entrain de créer un formulaire ou les visiteurs pourrons voter pour un site web.
Chaque site est représenté par une mini capture d'écran.

Au lieu de mettre simplement une capture et un bouton radio à côté, j'aimerais que la capture devienne le radio (je ne sais pas si c'est très clair ?).

En gros lorsque l'on clique sur une photo, elle se met en surbrillance et sert d'input radio.

D'avance merci pour vos conseils...
Modifié par Cozy_Cookie (04 Aug 2010 - 23:00)
Salut,

Si le <label> du bouton radio contient la capture d'écran, le bouton, qu'il soit visible ou non, sera activé par un clic de l'image. Donc tu peux simplement le masquer en CSS.
En revanche, si l'image n'est pas dans le <label>, il te faudra utiliser Javascript pour masquer le bouton et l'activer "manuellement" lors du clic sur l'image.

Pour la surbrillance de la capture sélectionnée, il te faudra du Javascript dans tous les cas.
marcv a écrit :

Pour la surbrillance de la capture sélectionnée, il te faudra du Javascript dans tous les cas.


Oh non, des selecteurs CSS bien pensés peuvent résoudre le probleme simplement.
<input type="radio" id="monRadio"/><label for="monRadio"><img /></label>

(C'est du pseudo code hein, faut rajouter tous les attributs qui vont bien)

input[type=radio]:checked + label img { box-shadow:0px 0px 15px rgba(0,0,0,0.5)}

Modifié par Tymlis (05 Aug 2010 - 22:59)
Oui, c'est vrai. Précisons quand même pour Cozy_Cookie que ce sélecteur ne marchera pas sous IE6 (les propriétés non plus, mais là il pourra trouver autre chose).
Super merci à tous.
Pour le compatibilité avec IE6, je pense que de toute façon je vais devoir m'en passer. Il y a trop de code que j'utilise qui n'est pas compatible...