I want to display radio buttons as tabs. Following this codepen, I've attempted this in my project. But when I click on pseudo tab, nothing happens. It doesn't get checked
.
How can I achieve the effect?
input.tgl-radio-tab-child {
position: absolute;
left: -99999em;
top: -99999em;
opacity: 1;
z-index: 1;
}
input.tgl-radio-tab-child+label {
cursor: pointer;
float: left;
border: 1px solid #aaa;
margin-right: -1px;
padding: .5em 1em;
position: relative;
}
input.tgl-radio-tab-child+label:hover {
background-color: #eee;
}
[type=radio]:checked+label {
background-color: #c30;
z-index: 1;
}
<label for="abc">ABC<span style="color: red;">*</span></label>
<div class="form-check">
<div class="tgl-radio-tabs">
<input type="radio" class="form-check-input tgl-radio-tab-child" name="abcorigin"><label class="radio-inline">ABCDEFGHIJKL</label>
<input type="radio" class="form-check-input tgl-radio-tab-child" name="abcorigin"><label class="radio-inline">MNOPQRSTUVWXYZ</label>
</div>
</div>
for
attribute to each label to link it to an input, which must be set equal to theid
attribute of the input element. Review the codepen more closely.