on-off statut checbox

pb c-trick

by GCyrillus

HTML

<p>From this base , you style label however you like, no need to slide it or anything.</p>
<p>Watch out, <code>:checked</code> is CSS3 not supported by IE8 , you may , therefor, need javascript.</p>
<input type="radio" name="me" id="a">
<label for="a">state</label>
<input type="radio" name="me" id="b">
<label for="b">state</label>
<input type="radio" name="me" id="c">
<label for="c">state</label>
<input type="radio" name="me" id="d">
<label for="d">state</label>

CSS

input {
    float:left;
    clear:left;
}
input:checked, input:not(:checked) {
    /* if :checked supported, let's go */
    opacity:0;
}
label {
    float:left;
    margin: 1em 0;
    text-indent:5px;
}
input:checked +label, input:not(:checked) + label {
    /* if :checked not supported , you may not want to style this */
    width:80px;
    font-size:1.5em;
    line-height:0;
    text-shadow:1px 1px white;
    background:gray;
    font-weight:bold;
    overflow:visible;
}
input:not(:checked) +label:after {
    content:'off';
    background:red;
    width:20px;
    margin-left:20px;
    vertical-align:middle;
    box-shadow:0 0 3px red;
    border-radius:1em;
    padding:3px;
    transition:1s;
}
:checked + label:after {
    background:green;
    margin-left: 2px;
    box-shadow:0 0 3px green;
    transition:1s;
    content:'on';
}