Customiser un radio button

Bonjour,

Je debute en CSS et je cherche a "customiser" l'aspect d'un radio-bouton pour qu'il est l'aspect d'un bouton classique (voir le rendu ci dessous) mais se comporte comme un radio-button (groupement des boutons, la sélection d'un bouton entraine la désélection de tous les autres...)

J'ai réussi dans le CSS avec la balise -moz-appearance à changer son apparence mais il est impossible de lui appliquer le style voulu, le bouton ne semble pas réagir aux autres propriétés que je lui applique.

si quelqu'un a une solution, ou une meilleure idée, je suis preneur,

Merci par avance


Modifié par kieran033 (08 Apr 2014 - 01:26)

tu peut jouer avec les gradients , pseudo et ombrages : http://codepen.io/gc-nomade/pen/LketK/


Tu peut appliquer ce style a ton label et cacher l'input dessous ou l'integrer . (voir exemple dans demo)
Modifié par gc-nomade (08 Apr 2014 - 02:48)

Merci pour ta réponse,

J'avais vu cette solution, mais je me demandais s'il existait une solution pure CSS3 sans image ou si c'était le seul moyen !

la y a pas d'image, sauf la tienne en référence, radio et checbox ne devraient pas être restyler a mon avis, histoire d'eviter tout quiproquo a la soumission d'un formulaire qui t'engage à quelque chose que tu ne choisis peut-être pas.

Ah oui autant pour moi j'avais pas vu,

J'ai essayé mais du coup j'ai quand même la petite bulle de sélection du radio button, mon idée est d'avoir une liste qui visuellement ressemblerait à l'image jointe et l'utilisateur devrait choisir parmis les choix sachant qu'il ne peut en choisir qu'un donc la sélection de l'un des boutons déselectionne tous les autres... Peut être que le radio button n'est pas approprié au rendu que je souhaite ?

J'ai exploré ta solution sans arriver à faire disparaitre le bouton et customiser l'état checké et non checké et également le -moz-appearance:button; qui semble restrictif sur l'apparance que je veux donner à mon bouton par la suite....

ma démo garde volontairement le radio visible pour que l'utilisateur sache si il a sélectionné ou non tel ou tel option / choix et parcequ'il y a encore des navigateur qui ne comprennent pas le selecteur :checked. Si tu veut faire disparaitre le radio, il te faut t'appuyer sur javascript pour avoir une interaction plus fiable avec l'utilisateur quelque soit le navigateur.

tu peut aussi essayer de le sortir de la zone visuelle et de t'en servir pour assombrir/éclaircir le bouton label http://codepen.io/gc-nomade/pen/kLzjF/

Ok merci beaucoup pour tous tes conseils !