I want a group of radio buttons to look like a group of toggle buttons (but still function like radio buttons). It's not necessary that they look exactly like toggle buttons.
How can I do this only with CSS and HTML?
EDIT: I will be satisfied making the little circle disappear and changing the style when the button is checked/unchecked.
This question is related to
html
css
radio-button
radiobuttonlist
togglebutton
I usually hide the real radio buttons with CSS (or make them into individual hidden inputs), put in the imagery I want (you could use an unordered list and apply your styles to the li element) and then use click events to toggle the inputs. That approach also means you can keep things accessible for users who aren't on a normal web browser-- just hide your ul by default and show the radio buttons.
I know this is an old question, but since I was just looking to do this, I thought I would post what I ended up with. Because I am using Bootstrap, I went with a Bootstrap option.
HTML
<div class="col-xs-12">
<div class="form-group">
<asp:HiddenField ID="hidType" runat="server" />
<div class="btn-group" role="group" aria-label="Selection type" id="divType">
<button type="button" class="btn btn-default BtnType" data-value="1">Food</button>
<button type="button" class="btn btn-default BtnType" data-value="2">Drink</button>
</div>
</div>
</div>
jQuery
$(document).ready(function () {
$('#divType button').click(function () {
$(this).addClass('active').siblings().removeClass('active');
$('#<%= hidType.ClientID%>').val($(this).data('value'));
//alert($(this).data('value'));
});
});
I chose to store the value in a hidden field so that it would be easy for me to get the value server-side.
Here's my version of that nice CSS solution JS Fiddle example posted above.
HTML
<div id="donate">
<label class="blue"><input type="radio" name="toggle"><span>$20</span></label>
<label class="green"><input type="radio" name="toggle"><span>$50</span></label>
<label class="yellow"><input type="radio" name="toggle"><span>$100</span></label>
<label class="pink"><input type="radio" name="toggle"><span>$500</span></label>
<label class="purple"><input type="radio" name="toggle"><span>$1000</span></label>
</div>
CSS
body {
font-family:sans-serif;
}
#donate {
margin:4px;
float:left;
}
#donate label {
float:left;
width:170px;
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
}
#donate label span {
text-align:center;
font-size: 32px;
padding:13px 0px;
display:block;
}
#donate label input {
position:absolute;
top:-20px;
}
#donate input:checked + span {
background-color:#404040;
color:#F7F7F7;
}
#donate .yellow {
background-color:#FFCC00;
color:#333;
}
#donate .blue {
background-color:#00BFFF;
color:#333;
}
#donate .pink {
background-color:#FF99FF;
color:#333;
}
#donate .green {
background-color:#A3D900;
color:#333;
}
#donate .purple {
background-color:#B399FF;
color:#333;
}
Styled with coloured buttons :)
Inspired by Michal B. answer. If you use bootstrap..
label.btn {_x000D_
padding: 0;_x000D_
}_x000D_
_x000D_
label.btn input {_x000D_
opacity: 0;_x000D_
position: absolute;_x000D_
}_x000D_
_x000D_
label.btn span {_x000D_
text-align: center;_x000D_
padding: 6px 12px;_x000D_
display: block;_x000D_
}_x000D_
_x000D_
label.btn input:checked+span {_x000D_
background-color: rgb(80, 110, 228);_x000D_
color: #fff;_x000D_
}
_x000D_
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">_x000D_
<div>_x000D_
<label class="btn btn-outline-primary"><input type="radio" name="toggle"><span>One</span></label>_x000D_
<label class="btn btn-outline-primary"><input type="radio" name="toggle"><span>Two</span></label>_x000D_
<label class="btn btn-outline-primary"><input type="radio" name="toggle"><span>Three</span></label>_x000D_
</div>
_x000D_
HTML:
<div>
<label> <input type="radio" name="toggle"> On </label>
<label> Off <input type="radio" name="toggle"> </label>
</div>
CSS:
div { overflow:auto; border:1px solid #ccc; width:100px; }
label { float:left; padding:3px 0; width:50px; text-align:center; }
input { vertical-align:-2px; }
Live demo: http://jsfiddle.net/scymE/1/
$(document).ready(function () {
$('#divType button').click(function () {
$(this).addClass('active').siblings().removeClass('active');
$('#<%= hidType.ClientID%>').val($(this).data('value'));
//alert($(this).data('value'));
});
});
_x000D_
<div class="col-xs-12">
<div class="form-group">
<asp:HiddenField ID="hidType" runat="server" />
<div class="btn-group" role="group" aria-label="Selection type" id="divType">
<button type="button" class="btn btn-default BtnType" data-value="1">Food</button>
<button type="button" class="btn btn-default BtnType" data-value="2">Drink</button>
</div>
</div>
</div>
_x000D_
Here is the solution that works for all browsers (also IE7 and IE8; didn't check for IE6):
http://jsfiddle.net/RkvAP/230/
HTML
<div class="toggle">
<label><input type="radio" name="toggle"><span>On</span></label>
</div>
<div class="toggle">
<label><input type="radio" name="toggle"><span>Off</span></label>
</div>
JS
$('label').click(function(){
$(this).children('span').addClass('input-checked');
$(this).parent('.toggle').siblings('.toggle').children('label').children('span').removeClass('input-checked');
});
CSS
body {
font-family:sans-serif;
}
.toggle {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
.toggle label {
float:left;
width:2.0em;
}
.toggle label span {
text-align:center;
padding:3px 0px;
display:block;
cursor: pointer;
}
.toggle label input {
position:absolute;
top:-20px;
}
.toggle .input-checked /*, .bounds input:checked + span works for firefox and ie9 but breaks js for ie8(ONLY) */ {
background-color:#404040;
color:#F7F7F7;
}
Makes use of minimal JS (jQuery, two lines).
Example Image (you can run the code below):
After looking for something really clean and straight forward, I ended up building this with ONE simple change from another code that was built only thinking on checkboxes, so I tryed the funcionality for RADIOS and it worked too(!).
The CSS (SCSS) is fully from @mallendeo (as established on the JS credits), what I did was simply change the type of the input to RADIO, and gave the same name to all the radio switches.... and VOILA!! They deactivate automatically one to the other!!
Very clean, and as you asked it's only CSS and HTML!!
It is exactly what I was looking for since 3 days after trying and editing more than a dozen of options (which mostly requiered jQuery, or didn't allow labels, or even wheren't really compatible with current browsers). This one's got it all!
I'm obligated to include the code in here to allow you to see a working example, so:
/** Toggle buttons_x000D_
* @mallendeo_x000D_
* forked @davidtaubmann_x000D_
* from https://codepen.io/mallendeo/pen/eLIiG_x000D_
*/
_x000D_
html, body {_x000D_
display: -webkit-box;_x000D_
display: -webkit-flex;_x000D_
display: -ms-flexbox;_x000D_
display: flex;_x000D_
min-height: 100%;_x000D_
-webkit-box-pack: center;_x000D_
-webkit-justify-content: center;_x000D_
-ms-flex-pack: center;_x000D_
justify-content: center;_x000D_
-webkit-box-align: center;_x000D_
-webkit-align-items: center;_x000D_
-ms-flex-align: center;_x000D_
align-items: center;_x000D_
-webkit-box-orient: vertical;_x000D_
-webkit-box-direction: normal;_x000D_
-webkit-flex-direction: column;_x000D_
-ms-flex-direction: column;_x000D_
flex-direction: column;_x000D_
font-family: sans-serif;_x000D_
}_x000D_
_x000D_
ul, li {_x000D_
list-style: none;_x000D_
margin: 0;_x000D_
padding: 0;_x000D_
}_x000D_
_x000D_
.tg-list {_x000D_
text-align: center;_x000D_
display: -webkit-box;_x000D_
display: -webkit-flex;_x000D_
display: -ms-flexbox;_x000D_
display: flex;_x000D_
-webkit-box-align: center;_x000D_
-webkit-align-items: center;_x000D_
-ms-flex-align: center;_x000D_
align-items: center;_x000D_
}_x000D_
_x000D_
.tg-list-item {_x000D_
margin: 0 10px;;_x000D_
}_x000D_
_x000D_
h2 {_x000D_
color: #777;_x000D_
}_x000D_
_x000D_
h4 {_x000D_
color: #999;_x000D_
}_x000D_
_x000D_
.tgl {_x000D_
display: none;_x000D_
}_x000D_
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {_x000D_
box-sizing: border-box;_x000D_
}_x000D_
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {_x000D_
background: none;_x000D_
}_x000D_
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {_x000D_
background: none;_x000D_
}_x000D_
.tgl + .tgl-btn {_x000D_
outline: 0;_x000D_
display: block;_x000D_
width: 4em;_x000D_
height: 2em;_x000D_
position: relative;_x000D_
cursor: pointer;_x000D_
-webkit-user-select: none;_x000D_
-moz-user-select: none;_x000D_
-ms-user-select: none;_x000D_
user-select: none;_x000D_
}_x000D_
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {_x000D_
position: relative;_x000D_
display: block;_x000D_
content: "";_x000D_
width: 50%;_x000D_
height: 100%;_x000D_
}_x000D_
.tgl + .tgl-btn:after {_x000D_
left: 0;_x000D_
}_x000D_
.tgl + .tgl-btn:before {_x000D_
display: none;_x000D_
}_x000D_
.tgl:checked + .tgl-btn:after {_x000D_
left: 50%;_x000D_
}_x000D_
_x000D_
.tgl-light + .tgl-btn {_x000D_
background: #f0f0f0;_x000D_
border-radius: 2em;_x000D_
padding: 2px;_x000D_
-webkit-transition: all .4s ease;_x000D_
transition: all .4s ease;_x000D_
}_x000D_
.tgl-light + .tgl-btn:after {_x000D_
border-radius: 50%;_x000D_
background: #fff;_x000D_
-webkit-transition: all .2s ease;_x000D_
transition: all .2s ease;_x000D_
}_x000D_
.tgl-light:checked + .tgl-btn {_x000D_
background: #9FD6AE;_x000D_
}_x000D_
_x000D_
.tgl-ios + .tgl-btn {_x000D_
background: #fbfbfb;_x000D_
border-radius: 2em;_x000D_
padding: 2px;_x000D_
-webkit-transition: all .4s ease;_x000D_
transition: all .4s ease;_x000D_
border: 1px solid #e8eae9;_x000D_
}_x000D_
.tgl-ios + .tgl-btn:after {_x000D_
border-radius: 2em;_x000D_
background: #fbfbfb;_x000D_
-webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;_x000D_
transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;_x000D_
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);_x000D_
}_x000D_
.tgl-ios + .tgl-btn:hover:after {_x000D_
will-change: padding;_x000D_
}_x000D_
.tgl-ios + .tgl-btn:active {_x000D_
box-shadow: inset 0 0 0 2em #e8eae9;_x000D_
}_x000D_
.tgl-ios + .tgl-btn:active:after {_x000D_
padding-right: .8em;_x000D_
}_x000D_
.tgl-ios:checked + .tgl-btn {_x000D_
background: #86d993;_x000D_
}_x000D_
.tgl-ios:checked + .tgl-btn:active {_x000D_
box-shadow: none;_x000D_
}_x000D_
.tgl-ios:checked + .tgl-btn:active:after {_x000D_
margin-left: -.8em;_x000D_
}_x000D_
_x000D_
.tgl-skewed + .tgl-btn {_x000D_
overflow: hidden;_x000D_
-webkit-transform: skew(-10deg);_x000D_
transform: skew(-10deg);_x000D_
-webkit-backface-visibility: hidden;_x000D_
backface-visibility: hidden;_x000D_
-webkit-transition: all .2s ease;_x000D_
transition: all .2s ease;_x000D_
font-family: sans-serif;_x000D_
background: #888;_x000D_
}_x000D_
.tgl-skewed + .tgl-btn:after, .tgl-skewed + .tgl-btn:before {_x000D_
-webkit-transform: skew(10deg);_x000D_
transform: skew(10deg);_x000D_
display: inline-block;_x000D_
-webkit-transition: all .2s ease;_x000D_
transition: all .2s ease;_x000D_
width: 100%;_x000D_
text-align: center;_x000D_
position: absolute;_x000D_
line-height: 2em;_x000D_
font-weight: bold;_x000D_
color: #fff;_x000D_
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);_x000D_
}_x000D_
.tgl-skewed + .tgl-btn:after {_x000D_
left: 100%;_x000D_
content: attr(data-tg-on);_x000D_
}_x000D_
.tgl-skewed + .tgl-btn:before {_x000D_
left: 0;_x000D_
content: attr(data-tg-off);_x000D_
}_x000D_
.tgl-skewed + .tgl-btn:active {_x000D_
background: #888;_x000D_
}_x000D_
.tgl-skewed + .tgl-btn:active:before {_x000D_
left: -10%;_x000D_
}_x000D_
.tgl-skewed:checked + .tgl-btn {_x000D_
background: #86d993;_x000D_
}_x000D_
.tgl-skewed:checked + .tgl-btn:before {_x000D_
left: -100%;_x000D_
}_x000D_
.tgl-skewed:checked + .tgl-btn:after {_x000D_
left: 0;_x000D_
}_x000D_
.tgl-skewed:checked + .tgl-btn:active:after {_x000D_
left: 10%;_x000D_
}_x000D_
_x000D_
.tgl-flat + .tgl-btn {_x000D_
padding: 2px;_x000D_
-webkit-transition: all .2s ease;_x000D_
transition: all .2s ease;_x000D_
background: #fff;_x000D_
border: 4px solid #f2f2f2;_x000D_
border-radius: 2em;_x000D_
}_x000D_
.tgl-flat + .tgl-btn:after {_x000D_
-webkit-transition: all .2s ease;_x000D_
transition: all .2s ease;_x000D_
background: #f2f2f2;_x000D_
content: "";_x000D_
border-radius: 1em;_x000D_
}_x000D_
.tgl-flat:checked + .tgl-btn {_x000D_
border: 4px solid #7FC6A6;_x000D_
}_x000D_
.tgl-flat:checked + .tgl-btn:after {_x000D_
left: 50%;_x000D_
background: #7FC6A6;_x000D_
}_x000D_
_x000D_
.tgl-flip + .tgl-btn {_x000D_
padding: 2px;_x000D_
-webkit-transition: all .2s ease;_x000D_
transition: all .2s ease;_x000D_
font-family: sans-serif;_x000D_
-webkit-perspective: 100px;_x000D_
perspective: 100px;_x000D_
}_x000D_
.tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before {_x000D_
display: inline-block;_x000D_
-webkit-transition: all .4s ease;_x000D_
transition: all .4s ease;_x000D_
width: 100%;_x000D_
text-align: center;_x000D_
position: absolute;_x000D_
line-height: 2em;_x000D_
font-weight: bold;_x000D_
color: #fff;_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 0;_x000D_
-webkit-backface-visibility: hidden;_x000D_
backface-visibility: hidden;_x000D_
border-radius: 4px;_x000D_
}_x000D_
.tgl-flip + .tgl-btn:after {_x000D_
content: attr(data-tg-on);_x000D_
background: #02C66F;_x000D_
-webkit-transform: rotateY(-180deg);_x000D_
transform: rotateY(-180deg);_x000D_
}_x000D_
.tgl-flip + .tgl-btn:before {_x000D_
background: #FF3A19;_x000D_
content: attr(data-tg-off);_x000D_
}_x000D_
.tgl-flip + .tgl-btn:active:before {_x000D_
-webkit-transform: rotateY(-20deg);_x000D_
transform: rotateY(-20deg);_x000D_
}_x000D_
.tgl-flip:checked + .tgl-btn:before {_x000D_
-webkit-transform: rotateY(180deg);_x000D_
transform: rotateY(180deg);_x000D_
}_x000D_
.tgl-flip:checked + .tgl-btn:after {_x000D_
-webkit-transform: rotateY(0);_x000D_
transform: rotateY(0);_x000D_
left: 0;_x000D_
background: #7FC6A6;_x000D_
}_x000D_
.tgl-flip:checked + .tgl-btn:active:after {_x000D_
-webkit-transform: rotateY(20deg);_x000D_
transform: rotateY(20deg);_x000D_
}
_x000D_
<h2>Toggle 'em</h2>_x000D_
<ul class='tg-list'>_x000D_
<li class='tg-list-item'>_x000D_
<h3>Radios:</h3>_x000D_
</li>_x000D_
<li class='tg-list-item'>_x000D_
<label class='tgl-btn' for='rd1'>_x000D_
<h4>Light</h4>_x000D_
</label>_x000D_
<input class='tgl tgl-light' id='rd1' name='group' type='radio'>_x000D_
<label class='tgl-btn' for='rd1'></label>_x000D_
<label class='tgl-btn' for='rd1'>_x000D_
<h4>Light</h4>_x000D_
</label>_x000D_
</li>_x000D_
<li class='tg-list-item'>_x000D_
<label class='tgl-btn' for='rd2'>_x000D_
<h4>iOS 7 (Disabled)</h4>_x000D_
</label>_x000D_
<input checked class='tgl tgl-ios' disabled id='rd2' name='group' type='radio'>_x000D_
<label class='tgl-btn' for='rd2'></label>_x000D_
<label class='tgl-btn' for='rd2'>_x000D_
<h4>iOS 7 (Disabled)</h4>_x000D_
</label>_x000D_
</li>_x000D_
<li class='tg-list-item'>_x000D_
<label class='tgl-btn' for='rd3'>_x000D_
<h4>Skewed</h4>_x000D_
</label>_x000D_
<input class='tgl tgl-skewed' id='rd3' name='group' type='radio'>_x000D_
<label class='tgl-btn' data-tg-off='OFF' data-tg-on='ON' for='rd3'></label>_x000D_
<label class='tgl-btn' for='rd3'>_x000D_
<h4>Skewed</h4>_x000D_
</label>_x000D_
</li>_x000D_
<li class='tg-list-item'>_x000D_
<label class='tgl-btn' for='rd4'>_x000D_
<h4>Flat</h4>_x000D_
</label>_x000D_
<input class='tgl tgl-flat' id='rd4' name='group' type='radio'>_x000D_
<label class='tgl-btn' for='rd4'></label>_x000D_
<label class='tgl-btn' for='rd4'>_x000D_
<h4>Flat</h4>_x000D_
</label>_x000D_
</li>_x000D_
<li class='tg-list-item'>_x000D_
<label class='tgl-btn' for='rd5'>_x000D_
<h4>Flip</h4>_x000D_
</label>_x000D_
<input class='tgl tgl-flip' id='rd5' name='group' type='radio'>_x000D_
<label class='tgl-btn' data-tg-off='Nope' data-tg-on='Yeah!' for='rd5'></label>_x000D_
<label class='tgl-btn' for='rd5'>_x000D_
<h4>Flip</h4>_x000D_
</label>_x000D_
</li>_x000D_
</ul>_x000D_
<ul class='tg-list'>_x000D_
<li class='tg-list-item'>_x000D_
<h3>Checkboxes:</h3>_x000D_
</li>_x000D_
<li class='tg-list-item'>_x000D_
<label class='tgl-btn' for='cb1'>_x000D_
<h4>Light</h4>_x000D_
</label>_x000D_
<input class='tgl tgl-light' id='cb1' type='checkbox'>_x000D_
<label class='tgl-btn' for='cb1'></label>_x000D_
<label class='tgl-btn' for='cb1'>_x000D_
<h4>Light</h4>_x000D_
</label>_x000D_
</li>_x000D_
<li class='tg-list-item'>_x000D_
<label class='tgl-btn' for='cb2'>_x000D_
<h4>iOS 7</h4>_x000D_
</label>_x000D_
<input class='tgl tgl-ios' id='cb2' type='checkbox'>_x000D_
<label class='tgl-btn' for='cb2'></label>_x000D_
<label class='tgl-btn' for='cb2'>_x000D_
<h4>iOS 7</h4>_x000D_
</label>_x000D_
</li>_x000D_
<li class='tg-list-item'>_x000D_
<label class='tgl-btn' for='cb3'>_x000D_
<h4>Skewed</h4>_x000D_
</label>_x000D_
<input class='tgl tgl-skewed' id='cb3' type='checkbox'>_x000D_
<label class='tgl-btn' data-tg-off='OFF' data-tg-on='ON' for='cb3'></label>_x000D_
<label class='tgl-btn' for='cb3'>_x000D_
<h4>Skewed</h4>_x000D_
</label>_x000D_
</li>_x000D_
<li class='tg-list-item'>_x000D_
<label class='tgl-btn' for='cb4'>_x000D_
<h4>Flat</h4>_x000D_
</label>_x000D_
<input class='tgl tgl-flat' id='cb4' type='checkbox'>_x000D_
<label class='tgl-btn' for='cb4'></label>_x000D_
<label class='tgl-btn' for='cb4'>_x000D_
<h4>Flat</h4>_x000D_
</label>_x000D_
</li>_x000D_
<li class='tg-list-item'>_x000D_
<label class='tgl-btn' for='cb5'>_x000D_
<h4>Flip</h4>_x000D_
</label>_x000D_
<input class='tgl tgl-flip' id='cb5' type='checkbox'>_x000D_
<label class='tgl-btn' data-tg-off='Nope' data-tg-on='Yeah!' for='cb5'></label>_x000D_
<label class='tgl-btn' for='cb5'>_x000D_
<h4>Flip</h4>_x000D_
</label>_x000D_
</li>_x000D_
</ul>
_x000D_
If you run the snippet, you'll see I leave the iOS radio checked and disabled, so you can watch how it is also affected when activating another one. I also included 2 labels for each radio, one before and one after. The copy of the original code to show the working checkboxes in the same window is also included.
Source: Stackoverflow.com