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

[dblanco]

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] {
    display: none;
}
 
#pm_info_dp input[type=radio] + label {
    cursor: pointer;
    display: inline-block;
    width: 13px; height: 18px;
    background: url(img/radio_off.gif) left 5px no-repeat;
    text-indent: -1000em;
}
 
#pm_info_dp input[type=radio]:checked + label {
    background: url(img/radio_on.gif) left 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

[hdennison]

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

[dargorg]

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,

[dblanco]

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.