Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] 4 imagenes distintas para cada radiobuton

Estas en el tema de 4 imagenes distintas para cada radiobuton en el foro de CSS en Foros del Web. Hola amigas y amigos a ver si me puede ayudar con esto. Miren necesito que 4 radiobutons los cuales mediante css muestran una imagen en ...
  #1 (permalink)  
Antiguo 17/07/2018, 06:59
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 11 años, 11 meses
Puntos: 5
4 imagenes distintas para cada radiobuton

Hola amigas y amigos a ver si me puede ayudar con esto.

Miren necesito que 4 radiobutons los cuales mediante css muestran una imagen en cada uno de los radio butons en vez de ese circulo pequeño por defecto.

Y cuando se les hace click encima de esas imagenes , estas cambian por otra imagen como

que viene a ser la imagen pero remarcada quedando asi el efecto como que se ha hecho click encima de dicho radio buton.

Y esto lo hace bien pero....

Como digo son 4 radiobutons (osea cuatro imagenes), pero las cuatro imagenes son la misma imagen y necesito que sean 4 imagenes distintas. osea una diferente para cada radio buton y que al hacer click en cada una de ellas se muestre su correspondiente imagen remarcada.

Espero que se haya entendido.

Dejo aqui mi codigo para ver si me pueden ayudar.

gracias de antemano

Código CSS:
Ver original
  1. input[type="radio"]
  2.  
  3.         {
  4.            display:none;
  5.         }
  6.  
  7.  
  8.  
  9.     input[type="radio"] + label
  10.  
  11.         {
  12.             background-image:url(imgs/icono_0.png);
  13.  
  14.             height: 70px;
  15.             width: 70px;
  16.             display:inline-block;
  17.             padding: 0 0 0 0px;
  18.             cursor:pointer;
  19.         }
  20.  
  21.  
  22.  
  23.     input[type="radio"]:checked + label
  24.  
  25.         {
  26.             background-image:url(imgs/icono_1.png);
  27.         }


Código HTML:
Ver original
  1. <input type="radio" id="id_1" value=0 name="pregunta_1" />
  2. <label for="id_1"></label>
  3.  
  4.  
  5.  
  6. <input type="radio" id="id_2" value=4 name="pregunta_1" />
  7. <label for="id_2"></label>
  8.  
  9.  
  10.  
  11. <input type="radio" id="id_3" value=6 name="pregunta_1" />
  12. <label for="id_3"></label>
  13.  
  14.  
  15.  
  16. <input type="radio" id="id_4" value=10 name="pregunta_1" />
  17. <label for="id_4"></label>
  #2 (permalink)  
Antiguo 17/07/2018, 08:22
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 2 meses
Puntos: 1146
Respuesta: 4 imagenes distintas para cada radiobuton

cambia
input[type="radio"] + label

con
#id_1 + label
y así sucesivamente para cada input
  #3 (permalink)  
Antiguo 19/07/2018, 10:17
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 11 años, 11 meses
Puntos: 5
Respuesta: 4 imagenes distintas para cada radiobuton

Muchas gracias Arturo me ha servido de mucho.

Eres un fenomeno!!!

Ya se algo nuevo.

Etiquetas: cada, display, distintas, height, imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:06.