CODEWITHSUNDEEP
css
input
input

Reputation: 7519

Radio buttons as tabs

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>

Upvotes: 0

Views: 7905

Answers (1)

j08691
j08691

Reputation: 207861

You need to bind your labels to your inputs via the for attribute which should reference the respective input's ID:

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 id="x" type="radio" class="form-check-input tgl-radio-tab-child" name="abcorigin"><label for="x" class="radio-inline">ABCDEFGHIJKL</label>
    <input id="y" type="radio" class="form-check-input tgl-radio-tab-child" name="abcorigin"><label for="y" class="radio-inline">MNOPQRSTUVWXYZ</label>
  </div>
</div>

Upvotes: 5

Related Questions