Utilice imágenes en lugar de botones de opción

Si tengo un grupo de radio con botones:

Imagen 1

... ¿cómo puedo mostrar solo imágenes en la opción de selección en lugar de los botones, por ejemplo?

ingrese la descripción de la imagen aquí

Jul 09 '13 13:07 Vignesh Pichamani

Envolver radio e imagen en<label>
Ocultar botón de opción (no lo use display:noneo visibility:hiddenafectará la accesibilidad)
Apunte a la imagen al lado de la radio oculta usando el selector de hermanos adyacentes +
No olvide proporcionar texto alternativo en el altatributo, especialmente porque funciona como etiqueta del botón de opción.

/* 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" alt="Option 1">
</label>

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

Expandir fragmento

_{No olvide agregar una clase a sus etiquetas y en CSS use esa clase en su lugar.}

Estilos y animaciones personalizados.

Aquí hay una versión avanzada que usa el <i>elemento y el ::afterpseudoelemento :

Radio personalizada CSS y casilla de verificación

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;
  height: 16px;
  transition: 0.2s;
  box-shadow: inset 0 0 0 8px #fff;
  border: 1px solid gray;
  background: gray;
}
.rad > i {
  width:  16px;
  border-radius: 50%;
}
.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:focus + i { /* FOCUS <i> STYLE */
  outline: 1px solid blue;
}
.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:focus + i {
  outline: 1px solid blue;
}
.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 aria-hidden="true"></i> Checkbox 1
</label>
<label class="ckb">
  <input type="checkbox" name="ckb2" value="b">
  <i aria-hidden="true"></i> Checkbox 2
</label>

Expandir fragmento

Jul 09 '2013 06:07 Roko C. Buljan

Ejemplo:

¡Aviso! Esta solución es solo CSS.

Selector de tarjeta de crédito, se sitúa la MasterCard en la demostración modificada.

Te recomiendo que aproveches CSS3 para hacer eso, ocultando el botón de opción de entrada predeterminado con reglas CSS3:

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

Acabo de hacer un ejemplo hace unos días.

JSFiddle
Cómo usar imágenes para botones de opción - Gist

Dec 06 '2013 17:12 Richard Cotrina

Puedes usar CSS para eso.

HTML (solo para demostración, es personalizable)

<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

Jul 09 '2013 06:07 Fracsi