twitter
Últimamente se han puesto de moda los interruptores horizontales (véase iOS o Gnome3) en reemplazo de los checkbox cuadrados y aburridos de toda la vida, y buscando por ahí implementaciones para formularios web sólo encontré soluciones poco elegantes usando imágenes. Así que me puse manos a la obra, lo conseguí, y comparto el resultado (espero ahorrar a alguien alguna hora).
Un poco mucho de CSS hace la magia:
.cool_checkbox, .cool_checkbox *{
height:30px; margin:0; padding:0;
display:inline-block;
white-space:nowrap; user-select: none;
}
.cool_checkbox{
font-family:sans-serif;
width:94px; position:relative; overflow:hidden;
border:1px solid gray; border-radius:6px;
background:gray;
}
.cool_checkbox input{
display:none;
}
.cool_checkbox label{
position:absolute; width:150px;
cursor:pointer;
transition: left 0.2s ease-in-out;
vertical-align:top;
line-height:100%;
left:-56px;
display:block;
}
.cool_checkbox > input:checked + label{
left:0px;
}
.cool_checkbox > input:disabled + label{
opacity:0.8;
}
.cool_checkbox label > span{
text-align:left; text-transform:uppercase;
font-weight:bolder; font-family:sans;
width:50px; position:relative; z-index:0;
box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
border-radius: 5px;
vertical-align:middle;
line-height:30px;
}
.cool_checkbox label > span:nth-child(1){
padding-right:15px; text-align:right;
background:#4085EC;
background-image: linear-gradient(bottom, #76AEFC 0%, #4D8EEF 49%, #4085EC 50%, #336ED4 100%);
color:white; text-shadow: 0px -1px 0.5px #1b3d72;
}
.cool_checkbox label > span:nth-child(2){
width:40px; margin:-2px -10px; z-index:1; border-radius: 6px;height:32px;
background:gray;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}
.cool_checkbox label > span:nth-child(2) > span{
width:38px; height:29px; margin:1px;
border-top:1px solid white;
overflow:hidden; text-indent:-999em;
border-radius: 5px;
background:#e4e4e4; background-image: linear-gradient(bottom, #FBFBFB 0%, #CECECE 100%);
}
.cool_checkbox label > span:nth-child(3){
padding-left:15px; text-align:left;
color:#7e7e7e;
background:#EFEFEF; background-image: linear-gradient(bottom, #FEFEFE 0%, #F9F9F9 49%, #EFEFEF 50%, #E7E7E7 100%);
}
/* A partir de aquí: arreglos temporales hasta que CSS3 esté bien soportado */
.cool_checkbox{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.cool_checkbox label{
-moz-transition: left 0.2s ease-in-out;
-webkit-transition: left 0.2s ease-in-out;
-o-transition: left 0.2s ease-in-out;
}
.cool_checkbox label > span{
-moz-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.cool_checkbox label > span:nth-child(1){
background-image: -o-linear-gradient(bottom, #76AEFC 0%, #4D8EEF 49%, #4085EC 50%, #336ED4 100%);
background-image: -moz-linear-gradient(bottom, #76AEFC 0%, #4D8EEF 49%, #4085EC 50%, #336ED4 100%);
background-image: -webkit-linear-gradient(bottom, #76AEFC 0%, #4D8EEF 49%, #4085EC 50%, #336ED4 100%);
background-image: -ms-linear-gradient(bottom, #76AEFC 0%, #4D8EEF 49%, #4085EC 50%, #336ED4 100%);
}
.cool_checkbox label > span:nth-child(2){
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}
.cool_checkbox label > span:nth-child(2) > span{
background-image: -o-linear-gradient(bottom, #FBFBFB 0%, #CECECE 100%);
background-image: -moz-linear-gradient(bottom, #FBFBFB 0%, #CECECE 100%);
background-image: -webkit-linear-gradient(bottom, #FBFBFB 0%, #CECECE 100%);
background-image: -ms-linear-gradient(bottom, #FBFBFB 0%, #CECECE 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.cool_checkbox label > span:nth-child(3){
background-image: -o-linear-gradient(bottom, #FEFEFE 0%, #F9F9F9 49%, #EFEFEF 50%, #E7E7E7 100%);
background-image: -moz-linear-gradient(bottom, #FEFEFE 0%, #F9F9F9 49%, #EFEFEF 50%, #E7E7E7 100%);
background-image: -webkit-linear-gradient(bottom, #FEFEFE 0%, #F9F9F9 49%, #EFEFEF 50%, #E7E7E7 100%);
background-image: -ms-linear-gradient(bottom, #FEFEFE 0%, #F9F9F9 49%, #EFEFEF 50%, #E7E7E7 100%);
}
Hay que incluir algo de HTML:
<span class="cool_checkbox"><input type="checkbox" id="chk1"/><label for="chk1"><span>on</span><span><span>/</span></span><span>off</span></label></span>
Demostración
Esperando que os haya sido útil, me despido.
PD: Es muy triste que webkit siga pintando nodos hijos mas allá del borde redondeado de su padre, a ver si lo arreglan algún día. Y otra cosa, uso transition y linear-gradient, lo que puede ser muy pesado de renderizar para dispositivos android e iOS menos potentes, la culpa de nuevo a webkit.
