Skip to content

Instantly share code, notes, and snippets.

@abitgone

abitgone/dabblet.css

Created August 23, 2012 08:16
Show Gist options
  • Save abitgone/3434193 to your computer and use it in GitHub Desktop.
Save abitgone/3434193 to your computer and use it in GitHub Desktop.
Download ZIP
Not-so-boring Checkboxes
Raw
dabblet.css
/**
* Not-so-boring Checkboxes
*/
.pretty-checkbox {
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
}
.pretty-checkbox input[type=checkbox] {
height:0; line-height: 0; padding: 0; margin: 0; position: relative; top: -10px; visibility: hidden;
}
.pretty-checkbox input[type=checkbox]+span {
display: block;
padding: 8px 16px;
border: 1px solid rgba(0,0,0,0.25);
background-color: #006dcc;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.5)), to(rgba(255,255,255,0)));
border-radius: 5px;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.pretty-checkbox input[type=checkbox]:checked+span {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0)), to(rgba(255,255,255,0.25)));
background-color: #003888;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 0 6px rgba(0,64,128,0.5);
padding-top: 9px;
padding-bottom: 7px;
text-shadow: none;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<p><label class="pretty-checkbox"><input type="checkbox" value="compare" id="not-required" /><span>Compare</span></label></p>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment