¿Te ayudamos?Cuéntanos qué necesitas
Cada día es más común encontrar elementos de formularios totalmente personalizados que mejoran la experiencia del usuario.
En este artículo vamos a ver como convertir el típico checkbox en un interruptor mucho más moderno y atractivo visualmente.
Vamos a ver un ejemplo de cómo quedaría este interruptor en las típicas opciones de un área de usuario:
span.question { display: inline-block; vertical-align: middle; margin-right: 10px; font-weight: bold;
}
.switch { position: relative; display: inline-block; width: 60px; height: 34px; vertical-align: middle;
}
.switch input { display:none;
}
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;
}
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;
}
input:checked + .slider { background-color: #E27AD8;
}
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);
}
.slider.round { border-radius: 34px;
}
.slider.round:before { border-radius: 50%;
}
Publicar mi dirección de email
Recibir boletín de novedades
Recibir emails de notificaciones
Primero necesitaremos definir el html. Vamos a usar las etiquetas label e input de tipo checkbox y un div extra que servirá para hacer el truco css.
HTML
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
Y ahora vamos con el css:
CSS
/* Formateamos el label que servirá de contenedor */
.switch { position: relative; display: inline-block; width: 60px; height: 34px;
}
/* Ocultamos el checkbox html */
.switch input { display:none;
}
/* Formateamos la caja del interruptor sobre la cual se deslizará la perilla de control o slider */
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;
}
/* Pintamos la perilla de control o slider usando el selector before */
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;
}
/* Cambiamos el color de fondo cuando el checkbox esta activado */
input:checked + .slider { background-color: #E27AD8;
}
/* Deslizamos el slider a la derecha cuando el checkbox esta activado */
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);
}
/* Aplicamos efecto de bordes redondeados en slider y en el fondo del slider */
.slider.round { border-radius: 34px;
}
.slider.round:before { border-radius: 50%;
}
Y esto es todo amigos, ahora ya sabemos como como crear un toggle switch o interruptor con css. Fácil, rápido y para toda la familia!!
Foto principal: Pierre Chatel