Skip to content

Instantly share code, notes, and snippets.

@pofigizm

pofigizm/index.html

Created January 11, 2015 09:39
Show Gist options
  • Save pofigizm/72ee898a7ee14b7a56c1 to your computer and use it in GitHub Desktop.
Save pofigizm/72ee898a7ee14b7a56c1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
input {
display:none;
}
label {
text-align: center;
vertical-align: middle;
display: inline-block;
border: 1px solid #ccc;
color: #aaa;
width:60px;
height: 60px;
transition: all .15s ease-in-out;
}
/* selected */
input:checked[id="a"] ~ label[for="a"],
input:checked[id="b"] ~ label[for="b"],
input:checked[id="c"] ~ label[for="c"],
input:checked[id="d"] ~ label[for="d"],
input:checked[id="e"] ~ label[for="e"] {
background-color: blue;
color: white;
width: 100px;
height: 100px;
}
/* after selected */
input:checked[id="a"] ~ label[for="a"] + label,
input:checked[id="b"] ~ label[for="b"] + label,
input:checked[id="c"] ~ label[for="c"] + label,
input:checked[id="d"] ~ label[for="d"] + label,
input:checked[id="e"] ~ label[for="e"] + label {
background-color: green;
color: white;
width: 80px;
height: 80px;
}
/* before selected */
input:checked[data-before="a"] ~ label[for="a"],
input:checked[data-before="b"] ~ label[for="b"],
input:checked[data-before="c"] ~ label[for="c"],
input:checked[data-before="d"] ~ label[for="d"] {
background-color: red;
color: white;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div>
<input type="radio" name="test" id="a" data-before>
<input type="radio" name="test" id="b" data-before="a">
<input type="radio" name="test" id="c" data-before="b" checked>
<input type="radio" name="test" id="d" data-before="c">
<input type="radio" name="test" id="e" data-before="d">
<label for="a"> A </label>
<label for="b"> B </label>
<label for="c"> C </label>
<label for="d"> D </label>
<label for="e"> E </label>
</div>
<script id="jsbin-source-css" type="text/css">html, body {
height: 100%;
margin: 0;
padding: 0;
}
input {
display:none;
}
label {
text-align: center;
vertical-align: middle;
display: inline-block;
border: 1px solid #ccc;
color: #aaa;
width:60px;
height: 60px;
transition: all .15s ease-in-out;
}
/* selected */
input:checked[id="a"] ~ label[for="a"],
input:checked[id="b"] ~ label[for="b"],
input:checked[id="c"] ~ label[for="c"],
input:checked[id="d"] ~ label[for="d"],
input:checked[id="e"] ~ label[for="e"] {
background-color: blue;
color: white;
width: 100px;
height: 100px;
}
/* after selected */
input:checked[id="a"] ~ label[for="a"] + label,
input:checked[id="b"] ~ label[for="b"] + label,
input:checked[id="c"] ~ label[for="c"] + label,
input:checked[id="d"] ~ label[for="d"] + label,
input:checked[id="e"] ~ label[for="e"] + label {
background-color: green;
color: white;
width: 80px;
height: 80px;
}
/* before selected */
input:checked[data-before="a"] ~ label[for="a"],
input:checked[data-before="b"] ~ label[for="b"],
input:checked[data-before="c"] ~ label[for="c"],
input:checked[data-before="d"] ~ label[for="d"] {
background-color: red;
color: white;
width: 80px;
height: 80px;
}
</script>
</body>
</html>
Raw
jsbin.lolubo.css
html, body {
height: 100%;
margin: 0;
padding: 0;
}
input {
display:none;
}
label {
text-align: center;
vertical-align: middle;
display: inline-block;
border: 1px solid #ccc;
color: #aaa;
width:60px;
height: 60px;
transition: all .15s ease-in-out;
}
/* selected */
input:checked[id="a"] ~ label[for="a"],
input:checked[id="b"] ~ label[for="b"],
input:checked[id="c"] ~ label[for="c"],
input:checked[id="d"] ~ label[for="d"],
input:checked[id="e"] ~ label[for="e"] {
background-color: blue;
color: white;
width: 100px;
height: 100px;
}
/* after selected */
input:checked[id="a"] ~ label[for="a"] + label,
input:checked[id="b"] ~ label[for="b"] + label,
input:checked[id="c"] ~ label[for="c"] + label,
input:checked[id="d"] ~ label[for="d"] + label,
input:checked[id="e"] ~ label[for="e"] + label {
background-color: green;
color: white;
width: 80px;
height: 80px;
}
/* before selected */
input:checked[data-before="a"] ~ label[for="a"],
input:checked[data-before="b"] ~ label[for="b"],
input:checked[data-before="c"] ~ label[for="c"],
input:checked[data-before="d"] ~ label[for="d"] {
background-color: red;
color: white;
width: 80px;
height: 80px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment