Todos sabemos, que el checkbox tiene una característica, que cuando hacemos click aparece una marca. А partir de esto al elemento se le asigna un atributo "checked".
A partir de aqui comenzamos a desarrollar nuestro elemento.
HTML
Código HTML:
<
div class="switcher">
<input id="sw" type="checkbox" class="switcher-value">
<label for="sw" class="sw_btn"></label>
<div class="bg"></div>
</div> como deslizador ponemos el tag "label", porque está vinculado a un ID específico para input.
Tendrá siguiente función. Tu clicas en "label" = pones marca en el "input".
CSS general
Código:
.switcher {
width: 124px;
height: 49px;
cursor: pointer;
position: relative;
}
.switcher * {
transition: all .2s;
-moz-transition: all .2s;
-webkit-transition: all .2s;
-o-transition: all .2s;
-ms-transition: all .2s;
}
.switcher .sw_btn {
background: url('btn.png') 0% 0% no-repeat;
width: 49px;
height: 49px;
display: block;
cursor: pointer;
z-index: 1;
position: relative;
}
.switcher .bg { background: url('bg-off.png') 0% 0% no-repeat; }
.switcher input.switcher-value { display: none; }
.switcher .bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
Como podéis ver, escondemos el "input", ya que lo necesitamos solo como almacén de valores.
Ahora vamos por lo mas interesante:
CSS
Código:
.switcher input.switcher-value:checked ~ .sw_btn { margin-left: 68px; }
.switcher input.switcher-value:checked ~ .sw_btn ~ .bg { background: url('bg-on.png') 0% 0% no-repeat; }
Primera linea nos dice, que la margen exterior del elemento con clase sw_btn sera 68px, cuando "input" tenga valor de "checked"
Segunda linea cambia el fondo para el elemento con clase .bg, que va después de elemento sw_btn. También con la misma condición que la primera linea.
[URL="http://myhtmlexamples.narod2.ru/cssswitch/index.html"]Demo[/URL]