Skip to content

Instantly share code, notes, and snippets.

@micmath

micmath/index.html

Last active January 24, 2021 18:49
Show Gist options
  • Save micmath/38081e971d1d9f0b995b87a7398b3a76 to your computer and use it in GitHub Desktop.
Save micmath/38081e971d1d9f0b995b87a7398b3a76 to your computer and use it in GitHub Desktop.
Download ZIP
Pick-one form items - source https://jsbin.com/neyitin
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.choice-set {
padding-top: 8px;
height:120px;
overflow: hidden;
}
.choice-set input[type="radio"] {
visibility: hidden;
display: none;
}
.choice-set label {
display: block;
font-size: 18px;
height: 120px;
opacity: 1.0;
padding: 2px;
margin-right: 12px;
transition: height 0.6s, padding 0.6s, opacity 0.4s;
transition-delay: 0.5s;
}
.choice-set input:checked~label {
opacity: 0;
height: 0;
padding: 0;
overflow: hidden;
}
.flex {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
button {
color: white;
background: #55f;
padding: 6px 12px;
border-radius: 3px;
}
.choice-set label span {
border: 2px solid transparent;
border-radius: 3px;
}
.choice-set label span:hover {
border-color: #ddd;
}
.choice-set label span.selected {
border: 2px solid green;
}
</style>
</head>
<body>
<div class="choice-set">
<div class="choice-row flex">
<input id="rad1" type="radio" name="choice_1">
<input id="rad2" type="radio" name="choice_1">
<label for="rad1"><span>Radio 1</span></label>
<label for="rad2"><span>Radio 2</span></label>
</div>
<div class="choice-row flex">
<input id="rad3" type="radio" name="choice_2">
<input id="rad4" type="radio" name="choice_2">
<label for="rad3"><span>Radio 3</span></label>
<label for="rad4"><span>Radio 4</span></label>
</div>
<div class="choice-row flex">
<input id="rad5" type="radio" name="choice_3">
<input id="rad6" type="radio" name="choice_3">
<label for="rad5"><span>Radio 5</span></label>
<label for="rad6"><span>Radio 6</span></label>
</div>
<div class="choice-row">
<button>More</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script id="jsbin-javascript">
$('label span').on('click', function() {
$(this).addClass('selected');
});
</script>
<script id="jsbin-source-css" type="text/css">.choice-set {
padding-top: 8px;
height:120px;
overflow: hidden;
}
.choice-set input[type="radio"] {
visibility: hidden;
display: none;
}
.choice-set label {
display: block;
font-size: 18px;
height: 120px;
opacity: 1.0;
padding: 2px;
margin-right: 12px;
transition: height 0.6s, padding 0.6s, opacity 0.4s;
transition-delay: 0.5s;
}
.choice-set input:checked~label {
opacity: 0;
height: 0;
padding: 0;
overflow: hidden;
}
.flex {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
button {
color: white;
background: #55f;
padding: 6px 12px;
border-radius: 3px;
}
.choice-set label span {
border: 2px solid transparent;
border-radius: 3px;
}
.choice-set label span:hover {
border-color: #ddd;
}
.choice-set label span.selected {
border: 2px solid green;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$('label span').on('click', function() {
$(this).addClass('selected');
});</script></body>
</html>
Raw
jsbin.neyitin.css
.choice-set {
padding-top: 8px;
height:120px;
overflow: hidden;
}
.choice-set input[type="radio"] {
visibility: hidden;
display: none;
}
.choice-set label {
display: block;
font-size: 18px;
height: 120px;
opacity: 1.0;
padding: 2px;
margin-right: 12px;
transition: height 0.6s, padding 0.6s, opacity 0.4s;
transition-delay: 0.5s;
}
.choice-set input:checked~label {
opacity: 0;
height: 0;
padding: 0;
overflow: hidden;
}
.flex {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
button {
color: white;
background: #55f;
padding: 6px 12px;
border-radius: 3px;
}
.choice-set label span {
border: 2px solid transparent;
border-radius: 3px;
}
.choice-set label span:hover {
border-color: #ddd;
}
.choice-set label span.selected {
border: 2px solid green;
}
Raw
jsbin.neyitin.js
$('label span').on('click', function() {
$(this).addClass('selected');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment