Seamos sinceros, los Checkbox por defecto que vienen en los navegadores nos son muy bonitos que digamos, ya que solo es un cuadrado con una palomita, es cierto que aveces la simplicidad es lo mejor, pero de vez en cuando no hace mal modernizar un poco las cosas. En fin, crearé este Checkbox tipo Switch utilizando puro HTML y CSS desde cero.
Video
Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Checkbox</title>
</head>
<body>
<div class="swtich-container">
<input type="checkbox" id="switch">
<label for="switch" class="lbl"></label>
</div>
</body>
</html>
Código CSS
.lbl{
display: inline-block;
width: 65px;
height: 33px;
background: #979797;
border-radius: 100px;
cursor: pointer;
position: relative;
transition: .2s;
}
.lbl::after{
content: '';
display: block;
width: 25px;
height: 25px;
background: #eee;
border-radius: 100px;
position: absolute;
top: 4px;
left: 4px;
transition: .2s;
}
#switch:checked + .lbl::after{
left: 36px;
}
#switch:checked + .lbl{
background: #00C8B1;
}
#switch{
display: none;
}
Deja tu comentario en la sección de abajo.
