Skip to content

Instantly share code, notes, and snippets.

@LeaVerou

LeaVerou/dabblet.css

Created March 15, 2013 01:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save LeaVerou/5166717 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save LeaVerou/5166717 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. LeaVerou revised this gist Mar 15, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -58,7 +58,7 @@
    :root input[type="checkbox"].ios-switch:focus + div {
    box-shadow: 0 .1em .1em rgba(0,0,0,.2) inset,
    0 .45em 0 .1em rgba(0,0,0,.05) inset,
    0 0 .4em 1px red;
    0 0 .4em 1px rgba(255,0,0,.5);
    }

    :root input[type="checkbox"].ios-switch + div:before,
  2. LeaVerou revised this gist Mar 15, 2013. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -55,6 +55,12 @@
    background-color: #eee;
    }

    :root input[type="checkbox"].ios-switch:focus + div {
    box-shadow: 0 .1em .1em rgba(0,0,0,.2) inset,
    0 .45em 0 .1em rgba(0,0,0,.05) inset,
    0 0 .4em 1px red;
    }

    :root input[type="checkbox"].ios-switch + div:before,
    :root input[type="checkbox"].ios-switch + div:after {
    font: bold 60%/1.9 sans-serif;
  3. LeaVerou revised this gist Mar 15, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
  4. LeaVerou revised this gist Mar 15, 2013. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@ <h1>iOS 6 style switches with pure CSS</h1>
    <label><input type="checkbox" class="ios-switch" checked />Another label after control</label>

    <p>Check out the slide animation, even in WebKit versions that don’t support animation for pseudo-elements.
    Browser support: <strong>Chrome, Firefox, </strong></p>
    Verified to work in <strong>Chrome, Firefox, IE10</strong>, but could possibly work in many others.</p>

    <ul>
    <li>Keyboard accessible</li>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
  5. LeaVerou revised this gist Mar 15, 2013. 1 changed file with 3 additions and 4 deletions.
    7 changes: 3 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -39,14 +39,13 @@
    content: 'On';
    float: left;
    width: 1.65em; height: 1.65em;
    margin: -1px;
    margin: -.1em;
    border: 1px solid rgba(0,0,0,.35);
    border-radius: inherit;
    background: white;
    background-image: linear-gradient(rgba(0,0,0,.2), transparent);
    box-shadow: 0 0 .5em rgba(0,0,0,.3),
    0 .2em hsla(0,0%,100%,.3) inset,
    0 -.1em .3em hsla(0,0%,0%,.2) inset;
    box-shadow: 0 .1em .1em .1em hsla(0,0%,100%,.8) inset,
    0 0 .5em rgba(0,0,0,.3);
    color: white;
    text-shadow: 0 -1px 1px rgba(0,0,0,.3);
    text-indent: -2.5em;
  6. LeaVerou revised this gist Mar 15, 2013. No changes.
  7. LeaVerou revised this gist Mar 15, 2013. 3 changed files with 67 additions and 33 deletions.
    77 changes: 49 additions & 28 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,29 +3,20 @@
    * by Lea Verou http://lea.verou.me
    */

    input[type="checkbox"]:not(:checked),
    input[type="checkbox"]:checked { /* :checked here acting as a filter for older browsers */
    :root input[type="checkbox"] { /* :root here acting as a filter for older browsers */
    position: absolute;
    opacity: 0;
    }

    label {
    position: relative;
    display: block;
    margin: 0 1em 1em 0;
    font: bold 150% sans-serif;
    text-shadow: 0 1px 1px white;
    }

    input[type="checkbox"].ios-switch + div {
    :root input[type="checkbox"].ios-switch + div {
    display: inline-block;
    vertical-align: middle;
    width: 3em; height: 1em;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 999px;
    margin: 0 .5em;
    background: white;
    background-image: linear-gradient(rgba(0,0,0,.25), transparent),
    background-image: linear-gradient(rgba(0,0,0,.1), transparent),
    linear-gradient(90deg, hsl(210, 90%, 60%) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    @@ -35,49 +26,79 @@ input[type="checkbox"].ios-switch + div {
    transition-duration: .4s;
    transition-property: padding, width, background-position, text-indent;
    box-shadow: 0 .1em .1em rgba(0,0,0,.2) inset,
    0 .5em rgba(0,0,0,.05) inset;
    0 .45em 0 .1em rgba(0,0,0,.05) inset;
    font-size: 150%; /* change this and see how they adjust! */
    }

    input[type="checkbox"].ios-switch:checked + div {
    :root input[type="checkbox"].ios-switch:checked + div {
    padding-left: 2em; width: 1em;
    background-position: 0 0;
    }

    input[type="checkbox"].ios-switch + div:before {
    :root input[type="checkbox"].ios-switch + div:before {
    content: 'On';
    float: left;
    width: 1.8em; height: 1.8em;
    width: 1.65em; height: 1.65em;
    margin: -1px;
    border: 1px solid rgba(0,0,0,.7);
    border: 1px solid rgba(0,0,0,.35);
    border-radius: inherit;
    background: white;
    background-image: linear-gradient(rgba(0,0,0,.2), transparent);
    box-shadow: 0 0 .5em rgba(0,0,0,.5),
    box-shadow: 0 0 .5em rgba(0,0,0,.3),
    0 .2em hsla(0,0%,100%,.3) inset,
    0 -.1em .3em hsla(0,0%,0%,.2) inset;
    color: white;
    text-shadow: none;
    text-indent: -2.8em;
    text-shadow: 0 -1px 1px rgba(0,0,0,.3);
    text-indent: -2.5em;
    }

    input[type="checkbox"].ios-switch:active + div:before {
    :root input[type="checkbox"].ios-switch:active + div:before {
    background-color: #eee;
    }

    input[type="checkbox"].ios-switch + div:before,
    input[type="checkbox"].ios-switch + div:after {
    font: bold 55%/2 sans-serif;
    :root input[type="checkbox"].ios-switch + div:before,
    :root input[type="checkbox"].ios-switch + div:after {
    font: bold 60%/1.9 sans-serif;
    text-transform: uppercase;
    }

    input[type="checkbox"].ios-switch + div:after {
    :root input[type="checkbox"].ios-switch + div:after {
    content: 'Off';
    float: left;
    text-indent: .7em;
    color: #666;
    text-indent: .5em;
    color: rgba(0,0,0,.45);
    text-shadow: none;

    }


    /* Switch code ends here, from now on it’s just bling for the demo page */

    label {
    position: relative;
    display: block;
    padding: .8em;
    border: 1px solid silver;
    border-top-width: 0;
    background: white;
    font: bold 110% sans-serif;
    }

    label:first-of-type {
    border-top-width: 1px;
    border-radius: .6em .6em 0 0;
    }

    label:last-of-type {
    border-radius: 0 0 .6em .6em;
    box-shadow: 0 1px hsla(0,0%,100%,.8);
    }

    body {
    padding: 1em;
    background: white;
    background: #d2d4dd;
    background-image: linear-gradient(90deg, transparent 30%, rgba(0,0,0,.02) 45%, rgba(0,0,0,.02) 55%, transparent 70%);
    background-size: 8px 8px;
    font: 100%/1.5 sans-serif;
    text-shadow: 0 1px 1px white;
    }
    21 changes: 17 additions & 4 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,20 @@
    <h1>iOS 6 style switches with pure CSS</h1>

    <label class="ios">Something <input type="checkbox" class="ios-switch" /></label>
    <label class="ios">Something else<input type="checkbox" class="ios-switch" checked /></label>
    <label>Something <input type="checkbox" class="ios-switch" /></label>
    <label>Pre-checked<input type="checkbox" class="ios-switch" checked /></label>

    <label class="ios"><input type="checkbox" class="ios-switch" />Label after control</label>
    <label class="ios"><input type="checkbox" class="ios-switch" checked />Another label after control</label>
    <label><input type="checkbox" class="ios-switch" />Label after control</label>
    <label><input type="checkbox" class="ios-switch" checked />Another label after control</label>

    <p>Check out the slide animation, even in WebKit versions that don’t support animation for pseudo-elements.
    Browser support: <strong>Chrome, Firefox, </strong></p>

    <ul>
    <li>Keyboard accessible</li>
    <li>No images</li>
    <li>No JS (except a tiny bit to add a div per checkbox, but you can do that manually</li>
    <li>Only one extra element per switch</li>
    <li>Standards compliant: Does not depend on any proprietary stuff</li>
    <li>Degrades gracefully</li>
    <li>Easy to scale by just changing its font-size</li>
    </ul>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
  8. LeaVerou revised this gist Mar 15, 2013. 3 changed files with 3 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@ label {
    position: relative;
    display: block;
    margin: 0 1em 1em 0;
    font: 200% sans-serif;
    font: bold 150% sans-serif;
    text-shadow: 0 1px 1px white;
    }

    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <h1>iOS 6 style switches</h1>
    <h1>iOS 6 style switches with pure CSS</h1>

    <label class="ios">Something <input type="checkbox" class="ios-switch" /></label>
    <label class="ios">Something else<input type="checkbox" class="ios-switch" checked /></label>
    1 change: 1 addition & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    // JS is only used to add the <div>s
    var switches = document.querySelectorAll('input[type="checkbox"].ios-switch');

    for (var i=0, sw; sw = switches[i++]; ) {
  9. LeaVerou revised this gist Mar 15, 2013. 2 changed files with 13 additions and 9 deletions.
    13 changes: 7 additions & 6 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -19,11 +19,12 @@ label {

    input[type="checkbox"].ios-switch + div {
    display: inline-block;
    vertical-align: middle;
    width: 3em; height: 1em;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 999px;
    margin: 0 auto .8em;
    background: #eee;
    margin: 0 .5em;
    background: white;
    background-image: linear-gradient(rgba(0,0,0,.25), transparent),
    linear-gradient(90deg, hsl(210, 90%, 60%) 50%, transparent 50%);
    background-size: 200% 100%;
    @@ -33,7 +34,7 @@ input[type="checkbox"].ios-switch + div {
    overflow: hidden;
    transition-duration: .4s;
    transition-property: padding, width, background-position, text-indent;
    box-shadow: 0 .1em .1em rgba(0,0,0,.3) inset,
    box-shadow: 0 .1em .1em rgba(0,0,0,.2) inset,
    0 .5em rgba(0,0,0,.05) inset;
    }

    @@ -49,8 +50,8 @@ input[type="checkbox"].ios-switch + div:before {
    margin: -1px;
    border: 1px solid rgba(0,0,0,.7);
    border-radius: inherit;
    background: #c4c4c4;
    background-image: linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,0));
    background: white;
    background-image: linear-gradient(rgba(0,0,0,.2), transparent);
    box-shadow: 0 0 .5em rgba(0,0,0,.5),
    0 .2em hsla(0,0%,100%,.3) inset,
    0 -.1em .3em hsla(0,0%,0%,.2) inset;
    @@ -60,7 +61,7 @@ input[type="checkbox"].ios-switch + div:before {
    }

    input[type="checkbox"].ios-switch:active + div:before {
    background-color: #aaa;
    background-color: #eee;
    }

    input[type="checkbox"].ios-switch + div:before,
    9 changes: 6 additions & 3 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,7 @@
    <h1>iOS style switches</h1>
    <h1>iOS 6 style switches</h1>

    <label class="ios"><input type="checkbox" class="ios-switch" />Tools</label>
    <label class="ios"><input type="checkbox" class="ios-switch" checked />Tools</label>
    <label class="ios">Something <input type="checkbox" class="ios-switch" /></label>
    <label class="ios">Something else<input type="checkbox" class="ios-switch" checked /></label>

    <label class="ios"><input type="checkbox" class="ios-switch" />Label after control</label>
    <label class="ios"><input type="checkbox" class="ios-switch" checked />Another label after control</label>
  10. LeaVerou revised this gist Mar 15, 2013. 1 changed file with 14 additions and 14 deletions.
    28 changes: 14 additions & 14 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    /**
    * Switch-style checkboxes.
    * Inspired by Espresso’s “Tools” switch
    * iOS 6 style switch checkboxes
    * by Lea Verou http://lea.verou.me
    */

    input[type="checkbox"]:not(:checked),
    @@ -11,32 +11,35 @@ input[type="checkbox"]:checked { /* :checked here acting as a filter for older b

    label {
    position: relative;
    display: inline-block;
    display: block;
    margin: 0 1em 1em 0;
    font: 75% sans-serif;
    font: 200% sans-serif;
    text-shadow: 0 1px 1px white;
    }

    input[type="checkbox"].ios-switch + div {
    display: inline-block;
    width: 3em; height: 1em;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 999px;
    margin: 0 auto .8em;
    background: #eee;
    background-image: linear-gradient(rgba(0,0,0,.25), transparent);
    background-image: linear-gradient(rgba(0,0,0,.25), transparent),
    linear-gradient(90deg, hsl(210, 90%, 60%) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    background-origin: border-box;
    background-clip: border-box;
    overflow: hidden;
    transition-duration: .4s;
    transition-property: padding, width;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8),
    0 .1em .1em rgba(0,0,0,.3) inset,
    transition-property: padding, width, background-position, text-indent;
    box-shadow: 0 .1em .1em rgba(0,0,0,.3) inset,
    0 .5em rgba(0,0,0,.05) inset;
    }

    input[type="checkbox"].ios-switch:checked + div {
    padding-left: 2em; width: 1em;
    background-color: hsl(210, 90%, 60%);
    background-position: 0 0;
    }

    input[type="checkbox"].ios-switch + div:before {
    @@ -60,10 +63,6 @@ input[type="checkbox"].ios-switch:active + div:before {
    background-color: #aaa;
    }

    .ios {
    font-size: 200%;
    }

    input[type="checkbox"].ios-switch + div:before,
    input[type="checkbox"].ios-switch + div:after {
    font: bold 55%/2 sans-serif;
    @@ -73,10 +72,11 @@ input[type="checkbox"].ios-switch + div:after {
    input[type="checkbox"].ios-switch + div:after {
    content: 'Off';
    float: left;
    text-indent: .7em;
    color: #666;
    }

    body {
    padding: 1em;
    background: silver;
    background: white;
    }
  11. LeaVerou revised this gist Mar 15, 2013. 3 changed files with 26 additions and 61 deletions.
    72 changes: 22 additions & 50 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -17,30 +17,32 @@ label {
    text-shadow: 0 1px 1px white;
    }

    input[type="checkbox"].switch + div {
    width: 1.8em; height: 1em;
    input[type="checkbox"].ios-switch + div {
    width: 3em; height: 1em;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 999px;
    margin: 0 auto .8em;
    background: #888;
    background-image: linear-gradient(rgba(0,0,0,.4), transparent);
    background: #eee;
    background-image: linear-gradient(rgba(0,0,0,.25), transparent);
    background-origin: border-box;
    background-clip: border-box;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
    overflow: hidden;
    transition-duration: .4s;
    transition-property: padding, width;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8),
    0 .1em .1em rgba(0,0,0,.3) inset,
    0 .5em rgba(0,0,0,.05) inset;
    }

    input[type="checkbox"].switch:checked + div {
    padding-left: .8em;
    width: 1em;
    input[type="checkbox"].ios-switch:checked + div {
    padding-left: 2em; width: 1em;
    background-color: hsl(210, 90%, 60%);
    }

    input[type="checkbox"].switch + div:after {
    content: '';
    display: block;
    width: 1em; height: 1em;
    input[type="checkbox"].ios-switch + div:before {
    content: 'On';
    float: left;
    width: 1.8em; height: 1.8em;
    margin: -1px;
    border: 1px solid rgba(0,0,0,.7);
    border-radius: inherit;
    @@ -49,59 +51,29 @@ input[type="checkbox"].switch + div:after {
    box-shadow: 0 0 .5em rgba(0,0,0,.5),
    0 .2em hsla(0,0%,100%,.3) inset,
    0 -.1em .3em hsla(0,0%,0%,.2) inset;
    color: white;
    text-shadow: none;
    text-indent: -2.8em;
    }

    input[type="checkbox"].switch:active + div:after {
    input[type="checkbox"].ios-switch:active + div:before {
    background-color: #aaa;
    }

    .ios {
    font-size: 200%;
    }

    .ios input[type="checkbox"].switch + div {
    width: 3em;
    background-color: #eee;
    background-image: linear-gradient(rgba(0,0,0,.25), transparent),
    linear-gradient(90deg, hsl(210, 90%, 60%) 50%, #eee 50%);
    background-size: auto, 200% 100%;
    background-position: 100% 0;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8),
    0 .1em .1em rgba(0,0,0,.3) inset,
    0 .5em rgba(0,0,0,.05) inset;
    transition-property: padding, width, background-position, text-indent;
    overflow: hidden;
    }

    .ios input[type="checkbox"]:checked.switch + div {
    border-color: gray;
    padding-left: 2em;
    width: 1em;
    background-position: 0 0;
    }

    .ios input[type="checkbox"].switch + div:before,
    .ios input[type="checkbox"].switch + div:after {
    input[type="checkbox"].ios-switch + div:before,
    input[type="checkbox"].ios-switch + div:after {
    font: bold 55%/2 sans-serif;
    text-transform: uppercase;
    }

    .ios input[type="checkbox"].switch + div:after {
    input[type="checkbox"].ios-switch + div:after {
    content: 'Off';
    width: 1.8em; height: 1.8em;
    color: #666;
    text-indent: 2.6em;
    }

    .ios input[type="checkbox"].switch + div:before {
    content: 'On';
    float: left;
    margin-left: -2.7em;
    color: white; text-shadow: none;
    }

    .ios input[type="checkbox"]:checked.switch + div:before {

    color: #666;
    }

    body {
    13 changes: 3 additions & 10 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,4 @@
    <h2>Smaller</h2>
    <label><input type="checkbox" class="switch" />Tools</label>
    <label><input type="checkbox" class="switch" checked />Tools</label>
    <h1>iOS style switches</h1>

    <h2>With larger font-size</h2>
    <label style="font-size:200%"><input type="checkbox" class="switch" />Tools</label>
    <label style="font-size:200%"><input type="checkbox" class="switch" checked />Tools</label>

    <h2>iOS style</h2>
    <label class="ios"><input type="checkbox" class="switch" />Tools</label>
    <label class="ios"><input type="checkbox" class="switch" checked />Tools</label>
    <label class="ios"><input type="checkbox" class="ios-switch" />Tools</label>
    <label class="ios"><input type="checkbox" class="ios-switch" checked />Tools</label>
    2 changes: 1 addition & 1 deletion dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    var switches = document.querySelectorAll('input[type="checkbox"].switch');
    var switches = document.querySelectorAll('input[type="checkbox"].ios-switch');

    for (var i=0, sw; sw = switches[i++]; ) {
    var div = document.createElement('div');
  12. LeaVerou created this gist Mar 15, 2013.
    110 changes: 110 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,110 @@
    /**
    * Switch-style checkboxes.
    * Inspired by Espresso’s “Tools” switch
    */

    input[type="checkbox"]:not(:checked),
    input[type="checkbox"]:checked { /* :checked here acting as a filter for older browsers */
    position: absolute;
    opacity: 0;
    }

    label {
    position: relative;
    display: inline-block;
    margin: 0 1em 1em 0;
    font: 75% sans-serif;
    text-shadow: 0 1px 1px white;
    }

    input[type="checkbox"].switch + div {
    width: 1.8em; height: 1em;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 999px;
    margin: 0 auto .8em;
    background: #888;
    background-image: linear-gradient(rgba(0,0,0,.4), transparent);
    background-origin: border-box;
    background-clip: border-box;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
    overflow: hidden;
    transition-duration: .4s;
    transition-property: padding, width;
    }

    input[type="checkbox"].switch:checked + div {
    padding-left: .8em;
    width: 1em;
    }

    input[type="checkbox"].switch + div:after {
    content: '';
    display: block;
    width: 1em; height: 1em;
    margin: -1px;
    border: 1px solid rgba(0,0,0,.7);
    border-radius: inherit;
    background: #c4c4c4;
    background-image: linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,0));
    box-shadow: 0 0 .5em rgba(0,0,0,.5),
    0 .2em hsla(0,0%,100%,.3) inset,
    0 -.1em .3em hsla(0,0%,0%,.2) inset;
    }

    input[type="checkbox"].switch:active + div:after {
    background-color: #aaa;
    }

    .ios {
    font-size: 200%;
    }

    .ios input[type="checkbox"].switch + div {
    width: 3em;
    background-color: #eee;
    background-image: linear-gradient(rgba(0,0,0,.25), transparent),
    linear-gradient(90deg, hsl(210, 90%, 60%) 50%, #eee 50%);
    background-size: auto, 200% 100%;
    background-position: 100% 0;
    box-shadow: 0 1px 1px hsla(0,0%,100%,.8),
    0 .1em .1em rgba(0,0,0,.3) inset,
    0 .5em rgba(0,0,0,.05) inset;
    transition-property: padding, width, background-position, text-indent;
    overflow: hidden;
    }

    .ios input[type="checkbox"]:checked.switch + div {
    border-color: gray;
    padding-left: 2em;
    width: 1em;
    background-position: 0 0;
    }

    .ios input[type="checkbox"].switch + div:before,
    .ios input[type="checkbox"].switch + div:after {
    font: bold 55%/2 sans-serif;
    text-transform: uppercase;
    }

    .ios input[type="checkbox"].switch + div:after {
    content: 'Off';
    width: 1.8em; height: 1.8em;
    color: #666;
    text-indent: 2.6em;
    }

    .ios input[type="checkbox"].switch + div:before {
    content: 'On';
    float: left;
    margin-left: -2.7em;
    color: white; text-shadow: none;
    }

    .ios input[type="checkbox"]:checked.switch + div:before {

    }

    body {
    padding: 1em;
    background: silver;
    }
    11 changes: 11 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    <h2>Smaller</h2>
    <label><input type="checkbox" class="switch" />Tools</label>
    <label><input type="checkbox" class="switch" checked />Tools</label>

    <h2>With larger font-size</h2>
    <label style="font-size:200%"><input type="checkbox" class="switch" />Tools</label>
    <label style="font-size:200%"><input type="checkbox" class="switch" checked />Tools</label>

    <h2>iOS style</h2>
    <label class="ios"><input type="checkbox" class="switch" />Tools</label>
    <label class="ios"><input type="checkbox" class="switch" checked />Tools</label>
    7 changes: 7 additions & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    var switches = document.querySelectorAll('input[type="checkbox"].switch');

    for (var i=0, sw; sw = switches[i++]; ) {
    var div = document.createElement('div');
    div.className = 'switch';
    sw.parentNode.insertBefore(div, sw.nextSibling);
    }
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}