Cómo crear un simple componente de interruptor de conmutación con el truco checkbox de CSS

En este breve tutorial, aprenderemos a crear un componente de interruptor usando únicamente CSS y aprovechando la «técnica con el truco checkbox de CSS». Durante el proceso, también veremos otras implementaciones de interruptores en Codepen. ¿Te parece un buen reto?

Nuestro componente de interruptor

Esto es lo que crearemos durante este tutorial: una simple lista de tareas por hacer:

Como inspiración para el diseño utilizaremos Hngry UI Kit - Food Delivery UI Kit (Hngry, kit de UI - Kit de UI de entrega de alimentos) disponible en Envato Elements. Es compatible con Sketch, Figma y Adobe XD, viene con variantes claras y oscuras e incluye muchos más componentes de UI que solo estas casillas de verificación. ¡Échale un vistazo!

1. Inicia con el marcado HTML

Para empezar, definiremos una simple lista ordenada con la clase switches. Cada elemento de la lista contendrá una casilla de verificación y su etiqueta asociada. Cada etiqueta incluirá dos spans. El primero contendrá el contenido del texto, mientras que el segundo vacío será responsable del interruptor de conmutación.

Poniéndolo todo junto, así es como se ve el marcado que se requiere:

1

<ol class="switches">

2

  <li>

3

    <input type="checkbox" id="1">

4

    <label for="1">

5

      <span>...</span>

6

      <span></span>

7

    </label>

8

  </li>

9

  <li>

10

    <input type="checkbox" id="2">

11

    <label for="2">

12

      <span>...</span>

13

      <span></span>

14

    </label>

15

  </li>

16

17

  <!-- more list items here -->

18

</ol>

2. Define los estilos

Lo primero de lo que tenemos que encargarnos en nuestros estilos es de ocultar visualmente la casilla de verificación:

1

[type="checkbox"] {

2

  position: absolute;

3

  left: -9999px;

4

}

A continuación, la lista tendrá un ancho máximo con contenido centrado de forma horizontal:

1

.switches {

2

  max-width: 500px;

3

  width: 95%;

4

  margin: 50px auto 0;

5

}

Para estilizar los números de nuestra lista exactamente como deseamos, nos desharemos de los estilos predeteminados del navegador y aprovecharemos los contadores CSS. Esto nos dará una lista de números al lado, todos generados con CSS:

Aquí están los estilos relacionados:

1

/*CUSTOM VARIABLES HERE*/

2

3

ol {

4

  list-style: none;

5

}

6

7

.switches li {

8

  position: relative;

9

  counter-increment: switchCounter;

10

}

11

12

.switches li::before {

13

  content: counter(switchCounter);

14

  position: absolute;

15

  top: 50%;

16

  left: -30px;

17

  transform: translateY(-50%);

18

  font-size: 2rem;

19

  font-weight: bold;

20

  color: var(--pink);

21

}

22

23

@media screen and (max-width: 600px) {

24

  .switches li::before {

25

    display: none;

26

  }

27

}

Las etiquetas se comportarán como contenedores flexibles y sus hijos directos se distribuirán en los límites del eje principal:

1

.switches label {

2

  display: flex;

3

  align-items: center;

4

  justify-content: space-between;

5

}

Crea el interruptor

Para crear el interruptor, primero especificaremos algunas dimensiones fijas para el elemento span correspondiente (el último).

Luego, definiremos sus pseudoelementos ::before y ::after. El pseudoelemento ::before será un círculo, mientras que el pseudoelemento ::after tendrá un icono de cierre como imagen de fondo.

Para lograr todo esto, aquí están los estilos correspondientes:

1

/*CUSTOM VARIABLES HERE*/

2

3

.switches span:last-child {

4

  position: relative;

5

  width: 50px;

6

  height: 26px;

7

  border-radius: 15px;

8

  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);

9

  background: var(--gray);

10

  transition: all 0.3s;

11

}

12

13

.switches span:last-child::before,

14

.switches span:last-child::after {

15

  content: "";

16

  position: absolute;

17

}

18

19

.switches span:last-child::before {

20

  left: 1px;

21

  top: 1px;

22

  width: 24px;

23

  height: 24px;

24

  background: var(--white);

25

  border-radius: 50%;

26

  z-index: 1;

27

  transition: transform 0.3s;

28

}

29

30

.switches span:last-child::after {

31

  top: 50%;

32

  right: 8px;

33

  width: 12px;

34

  height: 12px;

35

  transform: translateY(-50%);

36

  background: url(uncheck-switcher.svg);

37

  background-size: 12px 12px;

38

}

3. El truco de checkbox: alternar los interruptores

¡Ahora la parte interesante! Cada vez que hagamos clic en un interruptor, su apariencia cambiará del modo siguiente:

De manera más específica:

• Su color cambiará.
• La posición de su pseudoelemento ::before cambiará. Se moverá con una transición de deslizamientode izquierda a derecha.
• La posición y la imagen de fondo de su pseudoelemento ::after cambiará. Ahora se colocará en el lado izquierdo de su contenedor e incluirá una marca de verificación como imagen de fondo.

Para satisfacer todos los requisitos anteriores, aprovecharemos la pseudoclase :checked y el combinador de hermanos adyacentes (+). Si necesitas un repaso de lo que hacen estos selectores, consulta los recursos al final de este tutorial.

Estos son los estilos que se encargan de esta funcionalidad:

1

/*CUSTOM VARIABLES HERE*/

2

3

.switches [type="checkbox"]:checked + label span:last-child {

4

  background: var(--green);

5

}

6

7

.switches [type="checkbox"]:checked + label span:last-child::before {

8

  transform: translateX(24px);

9

}

10

11

.switches [type="checkbox"]:checked + label span:last-child::after {

12

  width: 14px;

13

  height: 14px;

14

  left: 8px;

15

  background-image: url(checkmark-switcher.svg);

16

  background-size: 14px 14px;

17

}

Conclusión

¡Eso es todo, amigos! En este tutorial, aprovechamos la «técnica con el truco checkbox de CSS» y logramos crear un útil componente de interruptor de conmutación. Esperemos que hayan disfrutado de este ejercicio y que lo incorporen en un próximo proyecto.

Aquí hay un recordatorio de lo que creamos:

Como siempre, ¡muchas gracias por leer!

Inspiración con el truco checkbox en CodePen

¿Qué mejor lugar para ver otras implementaciones con interruptores que CodePen? Aquí hay algunos excelentes ejemplos para abrir el apetito:

Colorful Switch (interruptor colorido) por Nikolay Talanov

CSS Heart Switch (interruptor de corazón con CSS) por Aaron Iker

Toggle Switch (interruptor de conmutación) por Håvard Brynjulfsen

(S)CSS Toggle Switch (interruptor de conmutación de [S]CSS) por oobleck

Gender Toggle Switch (interruptor de conmutación de género) por Chintu Yadav Sara

Toggle Radial Effect (conmutación con efecto radial) por Florin Pop

Lectura adicional

Revisa estos tutoriales para conocer más acerca de las cosas que puedes crear con la técnica del truco checkbox de CSS:

• 
  Selectores CSS
  Cómo crear una simple presentación de diapositivas con el truco checkbox de CSS
  George Martsoukos
• 
  Selectores CSS
  Cómo crear un componente de acordeón con el truco checkbox de CSS
  George Martsoukos
• 
  CSS
  Consejo rápido: Cómo crear un formulario de comentarios «fuera del lienzo» con CSS puro
  George Martsoukos
• 
  Selectores CSS
  Cómo crear un componente de filtrado con solo CSS
  George Martsoukos