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!
