¿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:
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
Trabajos relacionados
Plataforma de reclamaciones online
Fun musical spanish