Toggle Checkbox estilo iOS con HTML y CSS

Buenas a todos, en esta ocasión os traigo como crear el típico checkbox  transformarlo al estilo iOS, normalmente para versiones móviles de una web o para Phonegap funciona muy bien.

Vamos a ello, si queréis verlo en funcionamiento lo dejo en JSFiddle un ejemplo  así podréis ver su funcionamiento antes de implementarlo.

En primer lugar el HTML

<input class="toggle" type="checkbox" value="1" />

Una vez tengamos nuestro checkbox con el estilo predefinido de cada navegador incluimos en el archivo CSS lo siguiente

.toggle {
position: relative;
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
width: 60px;
height: 30px;
border-radius: 30px;
background-color: #FFF;
box-shadow: 0px 0px 5px #666;
transition: all 0.3s linear;
outline: none;
}
.toggle:before {
position: absolute;
background-color: #FFF;
content: "";
width: 30px;
height: 30px;
border-radius: 500px;
left: 0;
box-shadow: 0px 0px 5px #666;
transition: all 0.2s linear;
}
.toggle:checked {
background-color: #71C639;
}
.toggle:checked:before {
left: 30px !important;
}

Y nada más, ya tendremos un checkbox al estilo iOS solo con HTML y CSS sin utilizar Javascript que por supuesto tendrá una mayor fluidez.

Un mini tutorial, pero funcional. 🙂

Happy Code!

Amante de todo lo que tenga que ver con internet, la programación mi pasión, crear nuevas formas y nuevos sistemas que den vida a nuevos proyectos que faciliten la vida a muchas personas,