Cómo crear un switch con CSS3

Es bastante común ver este tipo de elementos en interfaces de usuario y es relativamente fácil crearlos pero necesitamos conocer algunos atributos nuevos de CSS3.

Checked

Éste se utiliza tanto en los campos de tipo radio como de tipo checkbox y lo podemos utilizar en CSS3 para darle movimiento o algún efecto a otro elemento elemento en nuestro DOM.

Selectores

• +: Este es un selector selecciona al elemento que está directamente después.
  
• ~: Este selecciona a los elementos adyacentes ya estén antes o después.

Para saber más sobre estos selectores, revisa mi anterior tutorial Cómo usar los selectores de hermano.

Esto es todo lo que necesitamos saber para crear nuestro Switch, hay varias formas de hacerlo pero yo elegiré la que creo que es mas óptima y más conveniente.

Primero necesitamos en nuestro HTML un campo de tipo checkbox que va estar dentro de label y adentro va a haber otro elemento, un span. En HTML sería así:

Código :

 <label for="check">
  <input type="checkbox" id="check" />
  <span class="toggle"></span>
</label>

Ahora necesitamos darles los estilos:

Código :

 /*ocultamos el elemento  ya que no nos interesa*/
input[type="checkbox"]{
  display:none;
}
/*creamos la forma del switch */
label{
  width:80px;
  height:20px;
  display:inline-block;
  margin-top:5px;
  bordeR:1px solid rgba(0,0,0,0.5);
  padding:0;
  border-radius:15px;
}
/*creamos el toggle o el elemento deslisante */
label .toggle{
  width:19px;
  height:19px;
  border:1px solid rgba(0,0,0,0.5);
  display:block;
  border-radius:100%;
  background: #ddd;
}
/* le decimos que cuando le haga checked haga lo siguiente*/
input[type="checkbox"]:checked + .toggle{
  margin-left:60px;
}

Y ya con eso tendríamos totalmente creado nuestro switch pero podemos añadirle muchísimas más cosas, como transiciones, la palabra off y on, etc. Puedes ver el ejemplo del switch visitando este enlace a mi cuenta de codepen, también te podrían interesar los otros ejemplos que hay en esa web, hasta la próxima!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.