JSFiddle - React, Tailwind, and code Playground
by chetfarley
HTML
<!--In this example, "001" needs to be a unique name or number for each button group (an ID related to the CAR rule perhaps), so many can be on screen & function at the same time-->
<div class="btn-pill">
<input type="radio" value="On" name="on-off-001" id="on-001">
<label for="on-001">On</label>
<input type="radio" value="Off" name="on-off-001" id="off-001">
<label for="off-001">Off</label>
</div><!--/.btn-pill-->
<div class="btn-pill">
<input type="radio" value="On" name="on-off-002" id="on-002">
<label for="on-002">On</label>
<input type="radio" value="Off" name="on-off-002" id="off-002">
<label for="off-002">Off</label>
</div><!--/.btn-pill-->
<div class="btn-pill">
<input type="radio" value="On" name="on-off-003" id="on-003">
<label for="on-003">On</label>
<input type="radio" value="Off" name="on-off-003" id="off-003">
<label for="off-003">Off</label>
</div><!--/.btn-pill-->CSS
/* Pill style button groups
--------------------*/
.btn-pill {
padding:3px;
}
.btn-pill input[type=radio] {
opacity: 0;
filter: alpha(opacity = 0);
position:absolute;
z-index:-1;
}
.btn-pill label {
border: 1px solid #aaa;
padding: 3px 10px;
margin-right: -5px;
background: #e8e8e8;
background: -moz-linear-gradient(top, #e8e8e8 0%, #aaaaaa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e8e8), color-stop(100%,#aaaaaa));
background: -webkit-linear-gradient(top, #e8e8e8 0%,#aaaaaa 100%);
background: -o-linear-gradient(top, #e8e8e8 0%,#aaaaaa 100%);
background: -ms-linear-gradient(top, #e8e8e8 0%,#aaaaaa 100%);
background: linear-gradient(to bottom, #e8e8e8 0%,#aaaaaa 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#aaaaaa',GradientType=0 );
cursor: pointer;
}
.btn-pill label.checked, .btn-pill label.checked:hover {
color:#fff;
border: 1px solid #0075c7;
background: #2485e4;
background: -moz-linear-gradient(top, #2485e4 0%, #67b1fd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2485e4), color-stop(100%,#67b1fd));
background: -webkit-linear-gradient(top, #2485e4 0%,#67b1fd 100%);
background: -o-linear-gradient(top, #2485e4 0%,#67b1fd 100%);
background: -ms-linear-gradient(top, #2485e4 0%,#67b1fd 100%);
background: linear-gradient(to bottom, #2485e4 0%,#67b1fd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2485e4', endColorstr='#67b1fd',GradientType=0 );
cursor:default;
}
.btn-pill label:hover {
-moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
background: #dfdfdf;
background: -moz-linear-gradient(top, #d2d2d2 0%, #aaaaaa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2d2d2),...JavaScript
$("input[type='radio']").click(function() {
if($(this).is(':checked')) {
var name1 = $(this).attr('name');
$('input[name=' + name1 + ']:radio').next('label').removeClass('checked');
$(this).next('label').addClass('checked');
}
});