Utilisez des images au lieu de boutons radio

Question

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

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

Answer 1

• Enveloppe radio y image en <label>
• Cacher la radio (N'utilisez pas le bouton display:none o visibility:hidden puisque cela aura un impact sur l'accessibilité)

• Ciblez l'image à côté de la radio cachée en utilisant Sélecteur de frères et sœurs adjacents +

  / 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="https://via.placeholder.com/40x60/0bf/fff&text=A"> </label>

  <label> <input type="radio" name="test" value="big"> <img src="https://via.placeholder.com/40x60/b0f/fff&text=B"> </label>

_{N'oubliez pas d'ajouter un <strong>classe </strong>à vos étiquettes et en CSS, utilisez cette <strong>classe </strong>à la place.}

---

Styles et animations personnalisés

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

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>

Answer 2

Exemple :

Attention ! Cette solution n'est que du CSS.

Je vous recommande de tirer parti des CSS3 pour ce faire, en masquant l'icône de l'utilisateur. par défaut bouton radio de saisie avec des 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.

• JSFiddle
• Comment utiliser des images pour les boutons radio - Gist

Answer 3

Vous pouvez utiliser les 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

Answer 4

Gardez les boutons radio cachés, et lorsque vous cliquez sur les images, sélectionnez-les en utilisant JavaScript et donnez un style à votre image pour qu'elle ait l'air d'être 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;
}

Answer 5

Il suffit d'utiliser une classe pour ne cacher que certains... en fonction de 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>