在 LI 上添加透明层答案

【问题标题】：Add transparent layer on LI在 LI 上添加透明层
【发布时间】：2021-08-03 12:32:12
【问题描述】：

我需要在 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>

【问题讨论】：

你不能用纯 CSS 来做到这一点，因为你的复选框嵌套在 li 元素内。因此'z-index'不起作用。你想完成什么？
@zergski 我已经编辑了我的问题，添加我正在尝试的内容。
是的，但是为什么你需要系统来处理就像你点击了'li'元素？你想改变它的风格或行为吗？ 'li' 本身也不处理输入事件..
透明层是什么？我没有看到任何代码。
是的，我无法添加透明层@Gosi

标签： html css wordpress css-selectors

【解决方案1】：

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

检查下面的sn-p。

仅供参考：您可以通过将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>

【讨论】：