Pure CSS Sliding Switch

A no-js sliding switch I created for eBay

by shanimal

HTML

<div class="toggle">
    <input class="transparent" type="checkbox" name="key" value="value" checked="checked" /> 
    <span class="slider">||</span>
    <span class="on">ON</span>
    <span class="off">OFF</span>
</div>

CSS

.toggle {
    width:5em;
    height:2em;
    border:1px solid #CCC;
    position:relative;
    border-radius:5px;
    overflow:hidden;
}
span {
  font:12px/18px bold sans-serif;
    padding-top:7px;
    text-align:center;
    display:inline-block;
    height:100%;
    width:50%;
    position:absolute;
}
.on {
    color:#FFF;
    background-color:#009900;
}
.off {
    color:#FFF;
    background-color:#FF0000;
    left:50%;
}
.transparent {
    /* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    /* IE 5-7 */
    -moz-opacity: 0;
    /* Netscape */
    -khtml-opacity: 0;
    /* Safari 1.x */
    opacity: 0;
    /* Good browsers */
}
span.slider {
    background-color:#EEE;
    color:#009900;
    z-index:1;
    left:0;
    transition:all 200ms;
}
input {
    position:absolute;
    opacity:0;
    //visibility:hidden;
    height:100%;
    width:100%;
    z-index:2;
}
input:checked + span.slider {
    color:#F33;
    left:50%;
}