No JS Toggle Switches

iOS7 style toggles

by bitstarr

HTML

<label>
    <input type="checkbox" value="on" name="one" />
    <span class="text">
        WiFi
    </span>
    <span class="toggle">
        <span class="toggler"></span>
    </span>
</label>

<label>
    <input type="checkbox" value="on" name="one" />
    <span class="text">
        Bluetooth
    </span>
    <span class="toggle red">
        <span class="toggler"></span>
    </span>
</label>

CSS

/* @see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

body {
    margin: 2em;
    font: 1em/1.4 "Nimbus Sans L", "Freesans", sans-serif;
    color: #444;
}
label {
    display: block;
    width: 100%;
    margin-bottom: 1ex;
    padding: 1ex;
    font-family: sans-serif;
    font-weight: bold;
    line-height: 1.9em;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}
.toggle {
    float: right;
    position: relative;
    width: 3.5em;
    height: 1.9em;
    padding: .2em;
    border-radius: 1em;
    background: #ddd;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25);
    transition: all .2s;
}
.toggle.red {
    background: #d14444;
}
.toggler {
    position: absolute;
    left: .2em;
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: #fff;
    border-radius: 50%;
    transition: all .2s;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .25);
}
input {
    display: none;
}
input:checked ~ .toggle {
    background: #6ace5a;
}
input:checked ~ .toggle .toggler {
    left: 1.8em;
}