Question

以下HTML正在作为图像标签的选择器生成单选按钮

<div class='small-2 columns buttonselector'>
  <label for="content_ki_id_1">
    <input class="invisi-selector" type="radio" value="1" name="content[ki_id]" id="content_ki_id_1" />
    <img src="/assets/circle.svg" />
    <div></div>
  </label>
</div>

CSS正确地使单选按钮不可见，但是在处理包装程序及其在选定的单选按钮上的可见性方面存在差距

.buttonselector > div {
    width: 100%;
    height: 100%;
    background: #fff;
}

.invisi-selector {
    opacity: 0;
}
.invisi-selector:checked + div {
    border-color: #ba53ad;
    border-width: 4px;
}

包装器在逻辑上不能采用选择器的类，因为它是不可见的。如何将选中的动作绑定到包装div？

Answer 1

它不能，但是您可以使用绝对定位使它看起来像它。

.buttonselector>label {
  width: 100%;
  height: 100%;
  background: #fff;
  display: block;
  position: relative;
}

.invisi-selector {
  opacity: 0;
  position: absolute;
}

.invisi-selector~div {
  z-index: -1;
  position: absolute;
  left: -4px;
  top: -4px;
  width: 100%;
  height: 100%;
}

.invisi-selector:checked~div {
  border: 4px solid #ba53ad;
}

<div class='small-2 columns buttonselector'>
  <label for="content_ki_id_1">
    <input class="invisi-selector" type="radio" value="1" name="content[ki_id]" id="content_ki_id_1" />
    <img src="/assets/circle.svg" />
    <div></div>
  </label>
</div>

CSS不可见单选按钮，但突出显示环绕div

1 个答案: