Estilos CSS para checkboxes y radio buttons

Los checkboxes y los radio buttons son unos elementos un poco incómodos a la hora de crear un formulario. Y con esto me refiero a que son elmentos que no aceptan reglas CSS. No les puedes dar un color o una apariencia que desees.

Esto es, sin duda, un problema. Como al resto de los elementos de un formulario HTML sí se le pueden asignar estilos, los checkboxes y los radio buttons, si deben formar parte de tu formulario, rompen toda la estética Puedes tener un diseño muy cuidado, pero estos elementos lo rompen completamente.

Afortunadamente, hay maneras de lograr que estos elementos tengan un aspecto coherente con tu formulario. El secreto está en asociarle, a cada uno de ellos, un elemento <label>. Esta etiqueta deberá estar, directamente, relacionada con el elemento activo cuyo aspecto desea modificar (un checbox o un radio button). Para ello, le asignaremos a <label> el atributo for, y al elemento activo que nos interese el atributo id, con el mismo valor en ambos.

El resto es fácil. Ya que no podemos tocar el aspecto de los elementos activos, los ocultaremos para que no se vean, y jugaremos con el aspecto de las etiquetas.

Hay dos maneras de hacer esto. Con CSS e imágenes, o sólo con CSS. Ambos sistemas son extermadamente fáciles de usar. En los vídeos que aparecen a continuación te explico como hacerlo, tanto con imágenes como sin ellas.

Los dos vídeos son bastante detallados. Además, puedes intercambiar de uno a otro sistema, en los ejemplos que te adjunto en este enlace y en este otro, distintas combinaciones de técnicas, como los selectores para referenciar a los elementos y sus etiquetas, o el uso de transiciones.

Espero que te resulten de utilidad. Nos vemos en el siguiente artículo.

   

Deja un comentario