Utilisez des images au lieu de boutons radio


167

Si j'ai un groupe radio avec des boutons:

Image 1

... comment puis-je afficher uniquement des images dans l'option de sélection au lieu des boutons, par exemple

entrez la description de l'image ici


Pouvons-nous voir un lien en direct ou un jsFiddle pour votre code?
Nitesh

3
Créez un ensemble de boutons radio et placez-les dans un div masqué. Sur l'image, cliquez sur définir ce bouton radio particulier coché signifie que sur la première image, cliquez sur définir votre premier bouton radio coché et de même pour les deux autres. Si vous ne l'avez pas, je peux aussi l'expliquer par code.
Chiragit007

Cela ne fonctionne pas ici, pouvez-vous suggérer stackoverflow.com/questions/42736745/…
Code Guy

Réponses:


387
  • Enveloppez la radio et l' image dans<label>
  • Masquer le bouton radio (ne pas utiliser display:noneouvisibility:hidden car cela aura un impact sur l'accessibilité)
  • Ciblez l'image à côté de la radio masquée à l'aide du sélecteur de frère Adjacent +

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}
<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>

N'oubliez pas d'ajouter une classe à vos étiquettes et en CSS, utilisez cette classe à la place.


Styles et animations personnalisés

Voici une version avancée utilisant l' <i>élément et le :afterpseudo:

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 */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* RADIO & CHECKBOX STYLES */
/* DEFAULT <i> STYLE */
.rad > i,
.ckb > i{ 
  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 <i> STYLE */
  box-shadow: inset 0 0 0 3px #fff;
  background: gray;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> 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) <i> STYLE */
  margin-left: 11px;
  background:  orange;
}
<label class="rad">
  <input type="radio" name="rad1" value="a">
  <i></i> Radio 1
</label>
<label class="rad">
  <input type="radio" name="rad1" value="b" checked>
  <i></i> Radio 2
</label>

<br>

<label class="ckb">
  <input type="checkbox" name="ckb1" value="a" checked>
  <i></i> Checkbox 1
</label>
<label class="ckb">
  <input type="checkbox" name="ckb2" value="b">
  <i></i> Checkbox 2
</label>


10
+1 pour le pseudo sélecteur, je pense que j'ai utilisé JavaScript dans le passé pour vérifier la sélection! Ça va m'apprendre ...
zik

3
la visibilité masquée signifie qu'il n'est pas cliquable et que la position absolue le sort du flux de documents
99 Problèmes - La syntaxe n'est pas un

1
C'est une excellente réponse. Puis-je ajouter que cela fonctionne également avec type="checkbox".
Wtower

ok c'est bien .. fonctionne très bien, fonctionne apparemment aussi sur IE, mais en fait ce n'est pas le cas. l'image se comporte correctement mais lorsque le formulaire est soumis, il n'y a pas de sélection de vignettes. Je suppose que j'utilise le nouvel IE fourni avec Win 8.1. Une idée?
Junaid Rehman

3
En retard à la fête, mais soyez prudent avec cela. Visibility:hiddencachera les entrées du lecteur d'écran et un grand non du point de vue de l'accessibilité.
DPac

100

Exemple:

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

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

Je vous recommande de profiter 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 viens de faire un exemple il y a quelques jours.


1
C'était super! Je l'ai intégré à un formulaire ASP.NET et cela a fonctionné comme un charme :)
Gus

Cet exemple ne fonctionne pas dans Firefox 49.0.2 sous XUbuntu 16.04.1
Sergey Kudriavtsev

@SergeyKudriavtsev peut-être que le code doit être mis à jour (cette réponse date de 2013). Heureusement, le code est ouvert à tous pour l'améliorer. Je vais y jeter un œil bientôt. À votre santé.
Richard Cotrina

Fonctionne bien pour moi dans Firefox 60, Windows 10.
Trevor

J'ai cela fonctionne pour un ensemble de 3 visages souriants. Maintenant, j'ai besoin de plusieurs lignes sur un formulaire, chacune avec son propre ensemble de visages souriants. Mon problème est que lorsqu'une ligne est modifiée, elles changent toutes. Avez-vous des idées sur la partie qui doit être modifiée pour y parvenir?
dave317

19

Vous pouvez utiliser CSS pour cela.

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

<div class="button">
    <input type="radio" name="a" value="a" id="a" />
    <label for="a">a</label>
</div>
<div class="button">
    <input type="radio" name="a" value="b" id="b" />
    <label for="b">b</label>
</div>
<div class="button">
    <input type="radio" name="a" value="c" id="c" />
    <label for="c">c</label>
</div>
...

CSS

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

jsFiddle


6

Gardez les boutons radio cachés, et en cliquant sur les images, sélectionnez-les à l'aide de JavaScript et stylisez votre image pour qu'elle ressemble à sélectionnée. Voici le balisage -

<div id="radio-button-wrapper">
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
</div>

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;
}

4

Il suffit d'utiliser une classe pour n'en cacher qu'une partie ... basée sur https://stackoverflow.com/a/17541916/1815624

/* HIDE RADIO */
.hiddenradio [type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
.hiddenradio [type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
.hiddenradio [type=radio]:checked + img {
  outline: 2px solid #f00;
}
<div class="hiddenradio">
<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>

<div class="">
<label>
  <input type="radio" name="test" value="small" checked>
  <img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>
</div>


1

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

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

Code modifié:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button - Radios</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });
  </script>
</head>
<body>

<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1"><img src="image1.gif" /></label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="image2.gif" /></label>
    <input type="radio" id="radio3" name="radio"><label for="radio3"><img src="image3.gif" /></label>
  </div>
</form>

</body>
</html>

jQueryUI s'occupe de l'arrière-plan de l'image afin que vous sachiez quel bouton est coché.

Attention: si vous souhaitez activer ou désactiver un bouton via Javascript, vous devez appeler la fonction d'actualisation:

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

0

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

   <div class="customize-radio">
        <label>Favourite Smiley</label><br>
        <label for="hahaha">
        <input type="radio" name="smiley" id="hahaha">
        <span class="haha-img"></span>
        HAHAHA
        </label>
        <label for="kiss">
        <input type="radio" name="smiley" id="kiss">
        <span class="kiss-img"></span>
        Kiss
        </label>
        <label for="tongueOut">
        <input type="radio" name="smiley" id="tongueOut">
        <span class="tongueout-img"></span>
        TongueOut
        </label>
    </div>

Le bouton radio doit être masqué,

.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 changer l'image en cliquant sur le bouton radio, ajoutez l'état coché à 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


0

Voici un exemple très simple

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);
    background-size: 100px 100px;
    height: 100px;
    width: 100px;
    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);
}
<div>
  <input type="radio" id="shipadd1" value=1 name="address" />
  <label for="shipadd1"></label>
  value 1
</div>

<div>
  <input type="radio" id="shipadd2" value=2 name="address" />
  <label for="shipadd2"></label>
  value 2
</div>

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

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

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.