Tengo una pantalla con una simple elección mediante un grupo de radio buttons. Para mejorar la interfáz, intento utilizar el <label> como "botón" y ocultar el radio. Hasta ahí bien, pero no se cuál sea la mejor manera de cambiar el estilo del label (en realidad es un span) para indicar que el "radio" asociado a él está marcado.
Para aclarar, tengo el formulario declarado como sigue:
Código html:
Ver original
<input type="radio" name="tipoConsulta" id="tipoUno" value="uno" class="oculto" /> <input type="radio" name="tipoConsulta" id="tipoDos" value="dos" class="oculto" /> <input type="radio" name="tipoConsulta" id="tipoTres" value="tres" class="oculto" />
Que, visualmente queda algo como:
El "UNO" se ve diferente porque tiene el ratón sobre él. La idea es darle click a una opción y cambiarle la clase para marcarlo visualmente como seleccionado, sin cambiar el comportamiento natural del formulario (en realidad se está marcando un radio).
Entonces, ¿por dónde tomar el asunto?, ¿alguna sugerencia/ejemplo?. Cabe mencionar que es probable desde un inicio el radio esté seleccionado e igual habría que indicarlo.
Gracias de antemano