Foros del Web » Creando para Internet » CSS »

Radio button con imagenes en IE

Estas en el tema de Radio button con imagenes en IE en el foro de CSS en Foros del Web. Hola a [email protected]! Que tal? Bueno pues nada os dejo un tramo de codigo que no sé porque no se ve en IE6 ni IE7, ...
  #1 (permalink)  
Antiguo 07/02/2007, 07:05
Avatar de ferrins  
Fecha de Ingreso: mayo-2005
Mensajes: 64
Antigüedad: 12 años, 6 meses
Puntos: 1
Radio button con imagenes en IE

Hola a [email protected]!

Que tal? Bueno pues nada os dejo un tramo de codigo que no sé porque no se ve en IE6 ni IE7, aunque si en firefox;

El funcionamiento es simple; se trata de que en los radio buttons, aparezca una imagen en funcion de si el radio esta chequeado o no, con una sola imagen que tiene todos los estados del radio button la vamos moviendo con el background-position, para arriba o abajo.

Pero no sé que hago mal, porque en IE no aparece nada de nada, que os parece?

<style type="text/css">
body{
font-family:Tahoma;
font-size:12px;
}
form{
background-color:#CCCCCC;
width:600px;
height:700px;
}
input[type="radio"] {
visibility: hidden;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
}
label{
border:1px solid #0000CC;
padding-left: 50px;
padding-top:25px;
padding-bottom:25px;
}
.radio_01{
border:1px solid #0000CC;
padding-left: 50px;
padding-top:25px;
padding-bottom:25px;
}
input[type="radio"] + label{
background: url("tirallonga.gif") 0 0 no-repeat;
background-position: 0 -50px;
}
input[type="radio"]:focus + label{
background-position: 0 -50px;
border:1px solid #00CC33;
}
input[type="radio"]:checked + label{
background-position: 0 -100px;
}
input[type="radio"]:checked:focus + label{
background-position: 0 -10px;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<form>
<input type="radio" id="a" name="pregunta1" value="1" /><label for="a"></label>
<input type="radio" id="b" name="pregunta1" value="1" /><label for="b"></label>
<input type="radio" id="c" name="pregunta2" value="1" /><label for="c"></label>
<input type="radio" id="d" name="pregunta2" value="1" /><label for="d"></label>
<input type="radio" id="e" name="pregunta2" /><label for="e"></label>
</form>
</body>
</html>

Bueno, gracias por leer hasta aquí! Cualquier pista os lo agradeceré!!
Gracias!
  #2 (permalink)  
Antiguo 07/02/2007, 08:50
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Radio button con imagenes en IE

Jamás lo había visto, pero quizás es que a IE no le gusta este tipo de declaración?

"input[type="radio"] + label{ ... }"
  #3 (permalink)  
Antiguo 07/02/2007, 10:57
Avatar de ferrins  
Fecha de Ingreso: mayo-2005
Mensajes: 64
Antigüedad: 12 años, 6 meses
Puntos: 1
Re: Radio button con imagenes en IE

Yo tampoco lo había visto pero es mejor que liarse con javascript, de todos modos alguna idea para conseguir esto de poner imagenes en lugar de radiobuttons?

Gracias!
  #4 (permalink)  
Antiguo 07/02/2007, 11:27
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Radio button con imagenes en IE

Hola:

Intenté ocultar los inputs radio para activarlos solo con los labels y en explorer si no están visibles los radios no se puede hacer nada... pero por lo que veo no quieres pasar el valor checked de los radios, por lo que tal vez sea mejor omitirlos y isar solo javascript...

Por cierto, esa sintaxis nunca funcionón en explorer... aunque sea estándar css

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
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 16:55.