Skip to content

Instantly share code, notes, and snippets.

@kizu

kizu/dabblet.css

Created May 7, 2013 21:23
Show Gist options
  • Save kizu/5536256 to your computer and use it in GitHub Desktop.
Save kizu/5536256 to your computer and use it in GitHub Desktop.
Download ZIP
Fake previous item selector
Raw
dabblet.css
/* Fake previous item selector */
/* Fix for +/~ selectors in webkit */
@-webkit-keyframes bugfix { from { margin: 0; } to { margin: 0; } }
label {
-webkit-animation: bugfix infinite 1s;
}
input {
position: absolute;
clip:rect(1px,1px,1px,1px);
}
label {
padding: 0.5em;
display: inline-block;
cursor: pointer;
}
input:checked + label {
background: blue;
}
input:checked + label + input + label,
input:checked + input + label,
input:checked + label + label {
background: lime;
}
input:checked + input + label + input + label,
input:checked + label + input + label + input + label,
input:checked + label + input + label + label,
input:checked + input + label + label {
background: red;
}
Raw
dabblet.html
<h1>Lime — selected, blue — previous, red — next</h1>
<p>
<input type="radio" name="test1" id="test1_a" checked />
<input type="radio" name="test1" id="test1_b" />
<label for="test1_a">a</label>
<input type="radio" name="test1" id="test1_c" />
<label for="test1_b">b</label>
<input type="radio" name="test1" id="test1_d" />
<label for="test1_c">c</label>
<input type="radio" name="test1" id="test1_e" />
<label for="test1_d">d</label>
<input type="radio" name="test1" id="test1_f" />
<label for="test1_e">e</label>
<input type="radio" name="test1" id="test1_g" />
<label for="test1_f">f</label>
<label for="test1_g">g</label>
</p>
<p>
<input type="radio" name="test2" id="test2_a" checked />
<input type="radio" name="test2" id="test2_b" />
<label for="test2_a">a</label>
<input type="radio" name="test2" id="test2_c" />
<label for="test2_b">b</label>
<label for="test2_c">c</label>
</p>
<p>
<input type="radio" name="test3" id="test3_a" checked />
<input type="radio" name="test3" id="test3_b" />
<label for="test3_a">a</label>
<label for="test3_b">b</label>
</p>
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