CSS - 4 imagenes distintas para cada radiobuton

 
Vista:

4 imagenes distintas para cada radiobuton

Publicado por Sam (1 intervención) el 17/07/2018 15:12:51
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

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

1
2
3
4
5
6
7
8
9
10
11
<input type="radio" id="id_1" value=0 name="pregunta_1" />
<label for="id_1"></label>
 
<input type="radio" id="id_2" value=4 name="pregunta_1" />
<label for="id_2"></label>
 
<input type="radio" id="id_3" value=6 name="pregunta_1" />
<label for="id_3"></label>
 
<input type="radio" id="id_4" value=10 name="pregunta_1" />
<label for="id_4"></label>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 630
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

4 imagenes distintas para cada radiobuton

Publicado por xve (489 intervenciones) el 17/07/2018 21:33:33
Hola Sam, para que cada radio tenga una imagen diferente, en vez de hacer referencia al input, puedes hacerlo, haciendo referencia al id

En vez de esto:
1
2
input[type="radio"] + label {}
input[type="radio"]:checked + label {}

puedes utilizar esto:
1
2
3
4
5
#id_1 + label {}
#id_1:checked + label {}
#id_2 + label {}
#id_2:checked + label {}
...

Espero que te sirva
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema
Val: 49
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

4 imagenes distintas para cada radiobuton

Publicado por txema (17 intervenciones) el 18/07/2018 05:13:43
Sobre el código expuesto y con mínimas modificaciones puedes conseguirlo.

En el HTML:
1
2
3
4
5
6
7
8
9
10
11
<input type="radio" id="id_1" value=0 name="pregunta_1" />
<label for="id_1"><span></span></label>
 
<input type="radio" id="id_2" value=4 name="pregunta_1" />
<label for="id_2"><span></span></label>
 
<input type="radio" id="id_3" value=6 name="pregunta_1" />
<label for="id_3"><span></span></label>
 
<input type="radio" id="id_4" value=10 name="pregunta_1" />
<label for="id_4"><span></span></label>

En CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
input[type="radio"] {
    display: none;
}
input[type="radio"] + label[for="id_1"] span {
    display: inline-block;
    height: 70px;
    width: 70px;
    background-image:url(imgs/icono_0.png);
    margin: 0;
    cursor:pointer;
}
input[type="radio"]:checked + label[for="id_1"] span {
    background-image:url(imgs/icono_1.png);
}
/* ... */

También (y es recomendable) puedes conseguirlo generando una sola imagen conteniendo en línea las 4 + 4 imágenes deseados. Esto es, en vez de tener 8 imágenes de 70 x 70 px tendríamos una imágen de 70 x 560 px

En este caso, el CSS sería:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
input[type="radio"] {
    display: none;
}
input[type="radio"] + label[for="id_1"] span {
    display: inline-block;
    height: 70px;
    width: 70px;
    background: url(imgs/iconos.png) 0 top no-repeat;
    margin: 0;
    vertical-align: middle;
    cursor:pointer;
}
input[type="radio"]:checked + label[for="id_1"] span {
    background:url(imgs/iconos.png) -280px top no-repeat;
}
/* ... */
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar