在 LI 上添加透明层

Question

我需要在 LI 上添加透明层，这样当用户尝试单击复选框时，系统会将其视为单击了 LI。这是我的代码。我尝试添加位置和 z 索引，但它对我不起作用。我需要从 CSS.

开始

.selectorFilterRow {
  border: 1px solid;
  background: #DDD;
  position: relative;
  z-index: 999;
}

.selectorFilterRow [type="checkbox"] {
  position: relative;
  z-index: 9;
}

<ul class="selector-list">
  <li class="selectorFilterRow">
    <div class="check-pro">
      <input type="checkbox" name="filterCheckbox[]" value="130" class="filterCheckBox">
      <label>One</label>
    </div>
  </li>
  <li class="selectorFilterRow">
    <div class="check-pro">
      <input type="checkbox" name="filterCheckbox[]" value="130" class="filterCheckBox">
      <label>Two</label>
    </div>
  </li>
  <li class="selectorFilterRow">
    <div class="check-pro">
      <input type="checkbox" name="filterCheckbox[]" value="130" class="filterCheckBox">
      <label>Three</label>
    </div>
  </li>
</ul>

Answer 1

您可以为 .selectorFilterRow 添加一个 ::after 伪元素。在这里，我为 .disableCheckbox class 做了这件事，并将这个 class 添加到最后一里。 For more about ::after

检查以下代码段。

仅供参考：您可以通过向该输入添加 disabled 属性来禁用该检查

.selectorFilterRow {
  border: 1px solid;
  background: #DDD;
  position: relative;
}
.disableCheckbox::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  z-index: 1
}

<ul class="selector-list">
  <li class="selectorFilterRow">
    <div class="check-pro">
      <input type="checkbox" name="filterCheckbox[]" value="130" class="filterCheckBox">
      <label>One</label>
    </div>
  </li>
  <li class="selectorFilterRow">
    <div class="check-pro">
      <input type="checkbox" name="filterCheckbox[]" value="130" class="filterCheckBox">
      <label>Two</label>
    </div>
  </li>
  <li class="selectorFilterRow disableCheckbox">
    <div class="check-pro">
      <input type="checkbox" name="filterCheckbox[]" value="130" class="filterCheckBox">
      <label>You can't click this check box</label>
    </div>
  </li>
</ul>

在 LI 上添加透明层

Add transparent layer on LI

html

css

wordpress

css-selectors