CSS Iphone checkboxes

by Abra Cadabra

HTML

<form action="#">
    <p>
        <input type="checkbox" id="test1" />
        <label for="test1"><span class="ui" data-negative="no" data-affirmative="yes"></span>
Do you want that?</label>
    </p>
    
    <p>
        <input type="checkbox" id="test2" />
        <label for="test2"><span class="ui" data-negative="no" data-affirmative="yes"></span>
Do you want that?</label>
    </p>

<p>
        <input type="checkbox" id="test3" />
        <label for="test3"><span class="ui" data-negative="no" data-affirmative="yes"></span>
Do you want that?</label>
    </p>    
</form>

CSS

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}
[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
    position: relative;
    padding-left: 75px;
    cursor: pointer;
}
[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before, [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {
    content:'';
    position: absolute;
}
[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before {
    left:0;
    top: 0px;
    width: 65px;
    height: 25px;
    background: #DDDDDD;
    transition: background-color .2s;
}
[type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after {
    width: 20px;
    height: 25px;
    transition: all .2s;
    background: #7F8C9A;
    top: 0px;
    left: 0px;
}
/* on checked */
[type="checkbox"]:checked + label:before {
    background:#34495E;
}
[type="checkbox"]:checked + label:after {
    background: #6daedf;
    top: 0px;
    left: 45px;
}
[type="checkbox"]:checked + label .ui, [type="checkbox"]:not(:checked) + label .ui:before, [type="checkbox"]:checked + label .ui:after {
    position: absolute;
    left: 6px;
    width: 65px;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
    transition: all .2s;
}
[type="checkbox"]:not(:checked) + label .ui:before {
    content: attr(data-negative);
    left: 32px;
}
[type="checkbox"]:checked + label .ui:after {
    content: attr(data-affirmative);
    color: #6daedf;
}
[type="checkbox"]:focus + label:before {
    /* border: 1px dashed #777; 
    box-sizing: border-box;
    margin-top: -1px; */
}
[type="checkbox"]:checked:focus + label:after{
    background: #3b92d4;
}
[type="checkbox"]:checked:focus + label .ui:after{
    color: #3b92d4;
}

[type="checkbox"]:not(:checked):focus + label:after{
    background: #616d7b;
}
[type="checkbox"]:not(:checked):focus + label .ui:before{
   ...