Utiliser des images au lieu de boutons radio

Si j’ai un groupe de radio avec des boutons:

Image 1

… comment afficher uniquement les images dans l’option select au lieu des boutons, par exemple

entrer la description de l'image ici

http://jsbin.com/image-instead-of-radio-button/5/

  • Enveloppez la radio et l’ image dans
  • Masquer le bouton radio
  • Ciblez l’image à côté de la radio cachée en utilisant le sélecteur de frères ou sœurs adjacent +

  

CSS:

 label > input{ /* HIDE RADIO */ visibility: hidden; /* Makes input not-clickable */ position: absolute; /* Remove input from document flow */ } label > input + img{ /* IMAGE STYLES */ cursor:pointer; border:2px solid transparent; } label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */ border:2px solid #f00; } 

N’oubliez pas d’append une classe à vos étiquettes et dans CSS, utilisez cette classe à la place.


Styles et animations personnalisés

Voici une version avancée utilisant l’élément et le pseudo: :after :

Radio personnalisée CSS et case à cocher

 body{color:#444;font:100%/1.4 sans-serif;} /* CUSTOM RADIO & CHECKBOXES http://stackoverflow.com/a/17541916/383904 */ .rad, .ckb{ cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .rad > input, .ckb > input{ /* HIDE ORG RADIO & CHECKBOX */ visibility: hidden; position: absolute; } /* RADIO & CHECKBOX STYLES */ .rad > i, .ckb > i{ /* DEFAULT  STYLE */ display: inline-block; vertical-align: middle; width: 16px; height: 16px; border-radius: 50%; transition: 0.2s; box-shadow: inset 0 0 0 8px #fff; border: 1px solid gray; background: gray; } /* CHECKBOX OVERWRITE STYLES */ .ckb > i { width: 25px; border-radius: 3px; } .rad:hover > i{ /* HOVER  STYLE */ box-shadow: inset 0 0 0 3px #fff; background: gray; } .rad > input:checked + i{ /* (RADIO CHECKED)  STYLE */ box-shadow: inset 0 0 0 3px #fff; background: orange; } /* CHECKBOX */ .ckb > input + i:after{ content: ""; display: block; height: 12px; width: 12px; margin: 2px; border-radius: inherit; transition: inherit; background: gray; } .ckb > input:checked + i:after{ /* (RADIO CHECKED)  STYLE */ margin-left: 11px; background: orange; } 
   

Exemple:

La tête haute! Cette solution est uniquement CSS.

Sélecteur de carte de crédit, la MasterCard sur la démo moddée est survolée.

Je vous recommande de tirer parti de CSS3 pour ce faire, en masquant le bouton radio d’entrée par défaut avec les règles CSS3:

 .options input{ margin:0;padding:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; } 

Je fais juste un exemple il y a quelques jours.

  • JSFiddle
  • Comment utiliser les images pour les boutons radio – Gist

Vous pouvez utiliser CSS pour cela.

HTML (uniquement pour la démonstration, il est personnalisable)

 
https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons/...

CSS

 input[type="radio"] { display: none; } input[type="radio"]:checked + label { border: 1px solid red; } 

jsfiddle

Gardez les boutons radio cachés et en cliquant sur les images, sélectionnez-les en utilisant JavaScript et donnez un style à votre image pour qu’elle ressemble à celle sélectionnée. Voici le balisage –

 

et JS

  $(".image-radio img").click(function(){ $(this).prev().attr('checked',true); }) 

CSS

 span.image-radio input[type="radio"]:checked + img{ border:1px solid red; } 

Voici une solution simple d’interface utilisateur jQuery basée sur l’exemple ici:

http://jqueryui.com/button/#radio

Code modifié:

 < !doctype html>    jQuery UI Button - Radios        

jQueryUI s’occupe de l’arrière-plan de l’image afin de savoir quel bouton est coché.

Attention: si vous souhaitez activer ou désactiver un bouton via Javascript, vous devez appeler la fonction de rafraîchissement:

  $('#radio3').prop('checked', true).button("refresh"); 

Voici un exemple très simple

HTML

 
value 1
value 2

CSS

 input[type="radio"]{ display:none; } input[type="radio"] + label { background-image:url(http://www.clker.com/cliparts/c/q/l/t/l/B/radiobutton-unchecked-sm-md.png); height: 300px; width: 300px; display:inline-block; padding: 0 0 0 0px; cursor:pointer; } input[type="radio"]:checked + label { background-image:url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png); } 

Démo: http://jsfiddle.net/La8wQ/2471/

Cet exemple basé sur cette astuce: https://css-sortingcks.com/the-checkbox-hack/

Je l’ai testé sur: chrome, firefox, safari

Ci-dessous, une capture d’écran des fonts biggg (à cause de la rapidité de la recherche d’images de gros boutons radio)

entrer la description de l'image ici

Les images peuvent être placées à la place des boutons radio à l’aide des éléments label et span.

  

Le bouton radio doit être caché,

 .customize-radio label > input[type = 'radio'] { visibility: hidden; position: absolute; } 

L’image peut être donnée dans la balise span,

 .customize-radio label > input[type = 'radio'] ~ span{ cursor: pointer; width: 27px; height: 24px; display: inline-block; background-size: 27px 24px; background-repeat: no-repeat; } .haha-img { background-image: url('hahabefore.png'); } .kiss-img{ background-image: url('kissbefore.png'); } .tongueout-img{ background-image: url('tongueoutbefore.png'); } 

Pour modifier l’image sur le bouton radio du clic, ajoutez l’état vérifié à la balise d’entrée,

 .customize-radio label > input[type = 'radio']:checked ~ span.haha-img{ background-image: url('haha.png'); } .customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{ background-image: url('kiss.png'); } .customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{ background-image: url('tongueout.png'); } 

Si vous avez des questions, reportez-vous au lien suivant, Comme j’ai pris la solution du blog ci-dessous, http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html