iphone-style-checkboxes

Styled with CSS and Images. https://github.com/tdreyno/iphone-style-checkboxes

HTML

<script src="https://raw.github.com/tdreyno/iphone-style-checkboxes/master/jquery/iphone-style-checkboxes.js"></script>
<link rel="stylesheet" href="http://i.minus.comundefined/dq3Ggt1kiEs73.css" type="text/css" media="screen" charset="utf-8">
<table>
    <thead>
        <th>Type</th>
        <td>Sample</td>
    </thead>
    <tr class="disabled">
        <th><label for="disabled">Disabled</label></th>
        <td>
            <input type="checkbox" id="disabled" disabled="disabled" />
        </td>
    </tr>
    <tr class="on_off">
        <th><label for="on_off">Default</label></th>
        <td>
            <input type="checkbox" id="on_off" />
        </td>
    </tr>
    <tr class="on_off">
        <th><label for="on_off_on">Default On</label></th>
        <td>
            <input type="checkbox" checked="checked" id="on_off_on"/>
        </td>
    </tr>
    <tr class="css_sized_container">
        <th><label for="css_sized_container">CSS Sized Container and Handle</label></th>
        <td>
            <input type="checkbox" id="css_sized_container" style="width: 100px;">
        </td>
    </tr>
    <tr class="long_tiny">
        <th><label class="left" for="long_tiny">Long and short labels</label></th>
        <td>
            <input type="checkbox" id="long_tiny" />
        </td>
    </tr>
    <tr class="onchange">
        <th>Event tracking</th>
        <td>
            <input type="checkbox" id="onchange" />
            <p>Checkbox status is <strong><span id="status">...</span></strong>.</p>
        </td>
    </tr>
</table>

CSS

/* some style for demonstration */
body {
    background: url('http://i.minus.com/iu19sVefHiQwD.png');
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    padding: 10px;
}
thead {
    font-style: italic;
    }
    thead th, thead td {
        font-weight: normal;
        font-weight: 200;
    }
th {
    padding-right: 10px;
    text-align: left;
    vertical-align: top;
}
td {
    padding: 5px 0;
}
/* and unique size for css_sized_container */
.css_sized_container .iPhoneCheckContainer {
    width: 250px;
}
/*
    and original style from github
    (code-style fixed with procssor.com)
*/
.iPhoneCheckContainer {
    position: relative;
    height: 27px;
    cursor: pointer;
    overflow: hidden;
    }
    .iPhoneCheckContainer input {
        position: absolute;
        top: 5px;
        left: 30px;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
        }
    .iPhoneCheckContainer label {
        white-space: nowrap;
        font-size: 17px;
        line-height: 17px;
        font-weight: bold;
        font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
        cursor: pointer;
        display: block;
        height: 27px;
        position: absolute;
        width: auto;
        top: 0;
        padding-top: 5px;
        overflow: hidden;
        }
    .iPhoneCheckContainer,
    .iPhoneCheckContainer label {
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        }
.iPhoneCheckDisabled {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
    }
label.iPhoneCheckLabelOn {
    color: white;
    background: url('https://github.com/tdreyno/iphone-style-checkboxes/raw/master/images/iphone-style-checkboxes/on.png?1284697268') no-repeat;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
    left: 0;
    padding-top: 5px;
    }
    label.iPhoneCheckLabelOn span {
        padding-left: 8px
        }
label.iPhoneCheckLabelOff {
   ...

JavaScript

$(window).load(function() {
    $('.on_off :checkbox').iphoneStyle();
    $('.disabled :checkbox').iphoneStyle();
    $('.css_sized_container :checkbox').iphoneStyle({
        resizeContainer: false,
        resizeHandle: false
    });
    $('.long_tiny :checkbox').iphoneStyle({
        checkedLabel: 'Very Long Text',
        uncheckedLabel: 'Tiny'
    });

    var onchange_checkbox = ($('.onchange :checkbox')).iphoneStyle({
        onChange: function(elem, value) {
            $('span#status').html(value.toString());
        }
    });

    setInterval(function() {
        onchange_checkbox.prop('checked', !onchange_checkbox.is(':checked')).iphoneStyle("refresh");
        return
    }, 2500);
});