Aprende como darle tus propios estilos a los Radio Button y Checkboxes utilizando solo HTML y CSS
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í:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Asi como también agregar la fuente “Roboto” que puedes encontrar desde google fonts:
https://www.google.com/fonts
<div class="wrap"> <form action="" class="formulario"> <div class="radio"> <h2>Radio Buttons</h2> <input type="radio" name="sexo" id="hombre"> <label for="hombre">Hombre</label> <input type="radio" name="sexo" id="mujer"> <label for="mujer">Mujer</label> <input type="radio" name="sexo" id="alien"> <label for="alien">Alien</label> </div> <div class="checkbox"> <h2>Checkboxines :D</h2> <input type="checkbox" name="checkbox" id="checkbox1"> <label for="checkbox1">Checkboxin 1</label> <input type="checkbox" name="checkbox2" id="checkbox2"> <label for="checkbox2">Checkboxin 2</label> </div> </form> </div>
Código Base CSS:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 16px;
background: #fff;
font-family: "Roboto";
}
.wrap {
width: 90%;
max-width: 1000px;
margin: 0 20px;
/*margin: auto;*/
}
.formulario h2 {
font-size: 16px;
color: #001F3F;
margin-bottom: 20px;
margin-left: 20px;
}
.formulario > div {
padding: 20px 0;
border-bottom: 1px solid #ccc;
}
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
PrimerComentarioMadafakas
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
chevere el style, la explicacion, todo… gracias por el video soy novato en esto pero con estos trucos paresco un experto… see u budy
Hombre, Mujer, Alien que bueno que te acordaste de ellos =3
Claro, pobresillos también ven mis videos y no los saludo? :P
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 :)
Aca una imagen
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?
Le agrege el ID al input y le puse el mismo nombre al label y funciono !
Lo dejo aca por si alguno le sucede(?
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; )
Muchas gracias la verdad me sirvió mucho el vídeo
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
Excelente vídeo, se aprende bastante con tus tutoriales.
Por qué no me aparecen los input ya diseñados??
Amiga lo resolviste? es que a mi tampoco me aparecen :/
con que programa programas
favor de enviar un link de descarga
Hola, una pregunta si quisiera que esos estilos de selección se queden y se muestren nuevamente al renderizar la página ¿Como lo harias?