iphone-style-checkboxes

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

HTML

<script src="https://github.com/tdreyno/iphone-style-checkboxes/raw/master/prototype/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

document.observe("dom:loaded", function() {
    new iPhoneStyle('.on_off input[type=checkbox]');
    new iPhoneStyle('.disabled input[type=checkbox]');
    new iPhoneStyle('.css_sized_container input[type=checkbox]', {
        resizeContainer: false,
        resizeHandle: false
    });
    new iPhoneStyle('.long_tiny input[type=checkbox]', {
        checkedLabel: 'Very Long Text',
        uncheckedLabel: 'Tiny'
    });

    var onchange_checkbox = $$('.onchange input[type=checkbox]').first();
    new iPhoneStyle(onchange_checkbox);
    setInterval(function toggleCheckbox() {
        onchange_checkbox.writeAttribute('checked', !onchange_checkbox.checked);
        onchange_checkbox.change();
        $('status').update(onchange_checkbox.checked);
    }, 2500);
});