Skip to content

Instantly share code, notes, and snippets.

@dtipson
Forked from LeaVerou/dabblet.css
Created March 4, 2013 22:10
Show Gist options
  • Save dtipson/5086154 to your computer and use it in GitHub Desktop.
Save dtipson/5086154 to your computer and use it in GitHub Desktop.
Failed attempt at gracefully degrading switch-style checkboxes
/**
* Failed attempt at gracefully degrading switch-style checkboxes
* without pseudoelements (which shouldn’t exist on replaced elements) and extra elements.
* Inspired by Espresso’s “Tools” switch
* DO NOT USE. Currently only works properly in WebKit :(
*/
input[type="checkbox"]:not(:checked)+label,
input[type="checkbox"]:checked+label { /* :checked here acting as a filter for older browsers */
appearance: none;
width: 2.5em;
height: 1.4em;
border: 1px solid rgba(0,0,0,.3);
border-radius: 999px;
background: radial-gradient(#e5e5e5, silver 60%, #888 62%, transparent 70%) no-repeat center left,
linear-gradient(#555,#777) gray;
background-size: 1.25em 1.25em, auto;
box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
transition: .4s background-position;
display:inline-block;
}
input[type="checkbox"]:active+label,
input[type="checkbox"]:focus+label {
background-image: radial-gradient(#ccc, #aaa 60%, #777 62%, transparent 70%),
linear-gradient(#555,#777);
}
input[type="checkbox"]:checked+label {
background-position: right;
}
input[type="checkbox"]{
display:none
}
body {
background: silver;
}
<input id="checkaroo" type="checkbox" /><label for="checkaroo">&nbsp;</label>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment