Hola a tod@s!
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!
