css - 单选按钮作为选项卡

Question

我想将单选按钮显示为选项卡。按照这个 codepen ，我在我的元素中尝试过这个。但是当我点击伪标签时，没有任何反应。它没有得到检查。

如何实现效果？

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>

Answer 1

您需要通过 for 属性将您的标签绑定(bind)到您的输入，该属性应引用相应输入的 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>