Foros del Web » Creando para Internet » CSS »

input[type=radio]:checked + label en IE8

Estas en el tema de input[type=radio]:checked + label en IE8 en el foro de CSS en Foros del Web. pues nada que pretendía personalizar unos input radio utilizando el siguiente código: Código PHP: < div ID = "pm_info_dp" > < span  class= "radio" >< input type ...
  #1 (permalink)  
Antiguo 22/10/2010, 13:41
 
Fecha de Ingreso: enero-2004
Mensajes: 207
Antigüedad: 13 años, 10 meses
Puntos: 1
input[type=radio]:checked + label en IE8

pues nada que pretendía personalizar unos input radio utilizando el siguiente código:

Código PHP:
<div ID="pm_info_dp">

<
span class="radio"><input type="radio" id="radio_01" value="0" name="type_pay" /><label for="radio_01">&nbsp;</label></span>

<
span class="radio"><input type="radio" id="radio_02" value="1" name="type_pay" /><label for="radio_02">&nbsp;</label></span>

<
span class="radio"><input type="radio" id="radio_03" value="2" name="type_pay" /><label for="radio_03">&nbsp;</label></span>

</
div
y en la hoja de estilo:

Código PHP:
#pm_info_dp input[type=radio] {
    
displaynone;
}

#pm_info_dp input[type=radio] + label {
    
cursorpointer;
    
displayinline-block;
    
width13pxheight18px;
    
backgroundurl(img/radio_off.gifleft 5px no-repeat;
    
text-indent: -1000em;
}

#pm_info_dp input[type=radio]:checked + label {
    
backgroundurl(img/radio_on.gifleft 5px no-repeat;


el caso es que en Mozilla y Chrome, pues perfecto pero con Iexplorer 8, sólo me aparece la imagen correspondiente al radio sin seleccionar (osea "radio_off.gif") pero hace caso omiso totalmente del "input[type=radio]:checked" ya le ponga una imagen, un color de fondo o lo que sea.

¿alguien sabe porque Iexplorer ignora el input[type=radio]:checked y cómo se soluciona?

gracias

Última edición por dblanco; 22/10/2010 a las 13:50
  #2 (permalink)  
Antiguo 22/10/2010, 14:38
 
Fecha de Ingreso: octubre-2010
Mensajes: 66
Antigüedad: 7 años, 2 meses
Puntos: 7
Respuesta: input[type=radio]:checked + label en IE8

css3.info te da la razón, parece que :checked no funciona en IE.

Me imagino que la solución será usar algun tipo de reemplazo por javascript, como "mootools sexy forms" "jQuery uniform" o similares
  #3 (permalink)  
Antiguo 22/10/2010, 16:47
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 7 años, 1 mes
Puntos: 9
Respuesta: input[type=radio]:checked + label en IE8

Exacto. La solución es utilizar javascript para el IE. Sólo con hacer esto te funcionaría (con JQuery):

Código:
$(document).ready(function()
{
    $("input[type=radio]:checked").css('background-image': 'url(img/radio_on.gif)', 'background-position': 'left 5px', 'background-repeat': 'no-repeat');
}
Un saludo,
  #4 (permalink)  
Antiguo 22/10/2010, 17:20
 
Fecha de Ingreso: enero-2004
Mensajes: 207
Antigüedad: 13 años, 10 meses
Puntos: 1
Respuesta: input[type=radio]:checked + label en IE8

y sin JQuery (ya que no quiero cargar la web con esa librería) cómo se haría la llamada desde javascript?

gracias

actualizado

dargorg, probé sólo por ver el resultado a añadir JQuery y el código que has publicado y efectivamente el "radio" que pongas "checked" por defecto te actualiza la imagen de fondo, pero sin embargo no se pueden "clickar" las opciones del "radio".

Obviamente podría solucionarlo añadiendo código javascript en un evento "onClick", pero a lo que me vengo a referir es que IE no se entera para nada del "checked" ni en cuanto a CSS ni a nivel de eventos.

Última edición por dblanco; 23/10/2010 a las 10:15

Etiquetas: label
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 08:50.