Skip to content

Instantly share code, notes, and snippets.

@wrumsby

wrumsby/dabblet.css

Created May 6, 2013 02:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save wrumsby/5523011 to your computer and use it in GitHub Desktop.
Save wrumsby/5523011 to your computer and use it in GitHub Desktop.
Download ZIP
Using images for checkboxes and radiobuttons
Raw
dabblet.css
/**
* Using images for checkboxes and radiobuttons
*/
body {
background-color: #fff;
color: #333;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
line-height: 1.6;
}
ul,
li {
margin-left: 0;
padding-left: 0;
}
li {
list-style: none;
}
.x-toggle:hover {
cursor: pointer;
}
.x-toggle input[type="radio"],
.x-toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
z-index: -1;
}
.x-toggle input[type="radio"] + .x-toggle-label-text,
.x-toggle input[type="checkbox"] + .x-toggle-label-text {
background-repeat: no-repeat;
background-position: 0px 3px;
padding-left: 18px;
}
.x-toggle input[type="checkbox"] + .x-toggle-label-text {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAIAAACQKrqGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAADpJREFUKFO1yqERwDAAxLDsv3QKLPplEfT5vHR/maINpmiDKdpgijaYog2maIMp2mCKNpiiDaYHzvkAci8q5Gg0BsgAAAAASUVORK5CYII=);
}
.x-toggle input[type="radio"] + .x-toggle-label-text {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAP9JREFUOE+NUiEShDAMrEQikUgkEolEIpGVlZU4nsATkEgkT0DyBCQSicx1Q9vj5mBgZ0pKu5ukSQSdIISQSZLA/qwoiqhpGtq2zTINFx8c5HnuiWEY8j9WHMf+HE6XZfkKnQiejZV8c8I4jpSmKXPgCIFE27Ze5LxdYd93yrKMuVprEi6VYRgs5R7zPDM3CALYI/xbFEXBYhZWVWWPn2H42gul/KvHLQxfeSEe/RZKKYhI2Ifyw5+AytqWkeDSmg16+YS6rpnLPV3X1XtBxc5j5YBIToQMp2k6JgdpYsxwAYtidV1Hfd9zs51jiDBFgB9yTE1Zlky4WkgPkQ4QfQB7iCVGTQWY/wAAAABJRU5ErkJggg==);
}
.x-toggle input[type="radio"]:disabled + .x-toggle-label-text,
.x-toggle input[type="checkbox"]:disabled + .x-toggle-label-text {
opacity: 0.4;
}
.x-toggle input[type="checkbox"]:checked + .x-toggle-label-text {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAIAAACQKrqGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAEpJREFUKFO1ykEOwCAMxMD8/9Mtqq1ogXJkTsFL3fSc+aOZN87JZdYTh9hSdm6R2hJ5yvY5Fdn+/g1EZeJOdPWbbcE0cdk4X1D1AhcH8g67+AATAAAAAElFTkSuQmCC);
}
.x-toggle input[type="radio"]:checked + .x-toggle-label-text {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAQpJREFUOE99Ui3WhUAIJRqNRqPRaDQajUaj0WhzCS7BaDS6BKNLMBqNRr65zDBP3893z0Ec4AIzQHwDEdVJkkA/JIoi7vuez/N0kSYWHxjyPPeBYRjKGRLHsbcj6b7vL6KSkNnoWjw3LMvCaZpKDBKhEA3D4Ema7RsQo9K2LZO2Ms+zC/mEErZtEx0EAbQt/wtKUhRFoTbiqqqc+Yl3EmDOrbMT1/XHe3wlAcbWOB9xlmXObOEc7vRE0zTW7y4qFwf+I13XpSNjkqc1P/cF+IWu68QvMz2O45XFyH2tFKikJHS4rqvdHLSJNYMDGo81jiNP0yTD1sQgYYsA3xe2pixLX/ld0B4qWTD/ATdO9vxiXE8EAAAAAElFTkSuQmCC);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul>
<li>
<label class="x-toggle">
<input type="checkbox">
<span class="x-toggle-label-text">
Initially unchecked item
</span>
</label>
</li>
<li>
<label class="x-toggle">
<input type="checkbox" disabled>
<span class="x-toggle-label-text">
Disabled item
</span>
</label>
</li>
<li>
<span class="x-toggle">
<input id="cb-2" type="checkbox" checked>
<label for="cb-2" class="x-toggle-label-text">
Initially checked item
</label>
</span>
</li>
</ul>
<div>
<label class="x-toggle">
<input type="radio" name="y-n" value="y" checked>
<span class="x-toggle-label-text">Yes</span>
</label>
<label class="x-toggle">
<input type="radio" name="y-n" value="n">
<span class="x-toggle-label-text">No</span>
</label>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"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