Webmaster Libre

Desarrollo web con software libre

Buscador

Checkboxes y Radio Buttons personalizados con CSS y Javascript

Hace tiempo llegó a portada de digg un artículo, del que se hicieron eco algunos blogs como Sentido Web, que hablaba de cómo dar estilo a los checkboxes y radio buttons de los formularios. Como viene siendo habitual, la mayor pega de este método es que no funciona en Internet Explorer.

Si quieres dar estilo a los radio buttons y checkbox de tus formularios, para todos los navegadores con javascript activado, prueba la técnica de Chris Erwin.

Por medio de Javascript se ocultan los botones y se le da estilo a la etiqueta label.
El formulario sigue recogiendo los datos normalmente ya que es la propia etiqueta label la que activa el control correspondiente.
Y si el Javascript no está activado, no se ocultarán los controles y el formulario se presentará como un formulario normal, totalmente funcional.

Ejemplo del CRIR en accion

Su implementación es muy sencilla, tenéis instrucciones detalladas en la página del autor.

CRIR: http://www.chriserwin.com/scripts/crir/index.php

Otras entradas

Esta entrada fue publicada por Alma Fernández el Friday, 28 de July de 2006 y está archivada en: CSS, Javascript, Scripts. Puedes dejar un comentario, o enviar un trackback desde tu sitio.

2 Comentarios

Agrega el tuyo
  1. disculpa, queria ver si tambie al momento de seleccionar un radio butto lo puede deseleccionar, picando de nuevo el radio, sin tener k aser click en otro radio para k ese se deselecciones.. gracias por tu tiempo..

    francisco 9 November, 2006

  2. Hola estaba interesado en los cambios de estilos de los radio button

    pero el ejemplo de la pagina no funciona en IE6 ni en IE7 y aun q no me gusten… hay mucha gente q los usa :P

    salu2

    Juan Andres 26 October, 2007

Comentar:

Algunas etiquetas HTML permitidas:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>