Aprende como darle tus propios estilos a los Radio Button y Checkboxes utilizando solo HTML y CSS

Share on Pinterest
Comparte con tus amigos










Enviar

Hola que tal!, hoy vamos aprender como hacer radio buttons y checkbox personalizados utilizando solo HTML y CSS.

A partir de este tutorial podrás olvidarte de los estilos tradicionales y feos que tienen estos input por defecto y personalizarlos como tu quieras.

El estilo que hoy le vamos a dar a estos radio button y checkbox está basado en Material Design de Google pero este tutorial te va a servir de base para crear tus propios estilos.

El Demo de los radio button y checkbox personalizados lo puedes ver desde nuestro codepen:

See the Pen Radio Buttons y Checkbox Personalizados y Animados by Carlos Arturo Esparza (@falconmasters) on CodePen.5968

Como puedes ver en el demo hemos rediseñado los inputs para que cuando el usuario seleccione uno la casilla que marca que está seleccionado desaparezca con una transición.

Tutorial como hacer Radio Buttons y Checkbox personalizados con HTML y CSS

Aquí tienes el código con el que yo he empezado en el tutorial, desde la estructura básica, hasta los estilos CSS base.

Código Base HTML:
Recuerda agregar a tu documento el meta viewport que tienes aquí:

Asi como también agregar la fuente “Roboto” que puedes encontrar desde google fonts:
https://www.google.com/fonts

Código Base CSS:

O si bien lo prefieres aquí tienes en github el código completo de los checkbox y radio buttons personalizados.

Código completo via Github:
https://github.com/falconmasters/custom_radio_checkbox

Los colores que he utilizado en el video los puedes encontrar aquí:
http://clrs.cc/

Si te gusto y sirvió el artículo te agradeceríamos si compartieras el artículo en las redes sociales, eso nos ayuda muchísimo a seguir haciendo mas contenido como este.

Super Tutoriales!
También puedes ver nuestros super tutoriales desde nuestro canal de YouTube:
http://www.youtube.com/falconmasters

Y si quieres estar al tanto de nuevos tutoriales, videos y cursos siguenos en:
http://www.twitter.com/FalconMasters
http://www.facebook.com/FalconMasters

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Rodrigo Soriano

    PrimerComentarioMadafakas

  • Juan Daniel Lugo Leonel

    Buenos días muchas gracias por compartir tus vídeos son muy interesantes y se aprende muy bien de ellos.
    Tengo una duda y quisiera saber si me la podrían aclarar,como puedo mostrar el valor de una base de datos en un checkbox para después poder interactuar con el espero que tengan

  • Marvin Rojas Loayza

    chevere el style, la explicacion, todo… gracias por el video soy novato en esto pero con estos trucos paresco un experto… see u budy

  • Tiamat Hathor

    Hombre, Mujer, Alien que bueno que te acordaste de ellos =3

    • Claro, pobresillos también ven mis videos y no los saludo? :P

  • vmklucas

    Tengo un problemon!

    Los circulitos que lo dejabamos como “Display:none;” me quedaron alejados…
    Entonces al clikear el label no hace efecto… Alguien me puede ayudar??

    Hice visible los circulitos para que puedan ver como estan…

    Salu2 de Argentina :)

    • vmklucas

      Aca una imagen

      • vmklucas

        Acabo de descubrir que mis Label no funcionan con mis input… Tienen el mismo nombre pero google chrome no me los vincula :/

        Alguien me puede ayudar?

        • vmklucas

          Le agrege el ID al input y le puse el mismo nombre al label y funciono !

          Lo dejo aca por si alguno le sucede(?

  • Edwin Galeano

    Cuando se le da el estilo de display: none; a los input tipo checkbox y radio, ya no es posible navegar entre ellos con el teclado (tabulador y flechas).

    Yo lo solucioné al quitarle el estilo display: none; y le agregué position: absolute; y el z-index: -1; algo asi:
    .formulario input[type=”radio”], .formulario input[type=”checkbox”]{
    display: inline; /* por defecto de este input*/
    position: absolute;
    z-index: -1;
    }

    Con esto permite navegar con el teclado entre controles, ya que cuando es un formulario grande es mas rápido llenarlo con las flechas y el tabulador o simplemente para los que acostumbramos a llenarlos de esta forma.
    Nota: pueden seguir siendo visibles los controles después de estos estilos, ya que al menos algo que contengo a los controles debe tener fondo como un background-color por ejemplo, o también puedes cambiar la posición del control con un número grande ( left: -5000px; top: -5000px; )

  • Simon rua cuervo

    Muchas gracias la verdad me sirvió mucho el vídeo

  • Edenilson

    Muito bom, gostei muito deste tutorial, aproveitando, tentei criar um formulario maior com flexbox grid com duas colunas e não consegui, isso é possivel de se fazer?
    Forte abraço
    Edenilson

  • Joel Castro

    Excelente vídeo, se aprende bastante con tus tutoriales.


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso