html - 纯 CSS 复选框在 WordPress 中不起作用

Question

我在使用 Contact Form 7 插件的 WordPress 网站上找到了我想使用的纯 CSS 复选框 ( http://codepen.io/imohkay/pen/zFwec )。单击这些复选框后没有任何反应。

我复制了整个 CSS 并更改了类，只是为了使其适合 Contact Form 7 通过 WordPress 生成的 HTML。

HTML:

input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}
input[type="checkbox"],
.wpcf7-list-item-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.wpcf7-list-item-label {
  position: relative;
}
input[type="checkbox"] + .wpcf7-list-item-label:before {
  content: '';
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
  background: #008aff;
}

<input type="checkbox" name="checkbox001[]" value="Połączyć wewnętrzne silosy">
<label for="checkbox001[]" class="wpcf7-list-item-label">Option a</label>
<span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox001[]" value="Poprawić zaangażowanie pracowników">&nbsp;<span for="checkbox001[]" class="wpcf7-list-item-label">Option b</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox001[]" value="Otrzymywać niefiltrowany feedback z terenu">&nbsp;<span class="wpcf7-list-item-label">Option c</span></span>

我找不到这里有什么问题

Answer 1

如果从 input[type="checkbox"] 中删除 opacity: 0;，问题就会变得很清楚:

input[type="checkbox"] {
  position: absolute;
}
input[type="checkbox"],
.wpcf7-list-item-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.wpcf7-list-item-label {
  position: relative;
}
input[type="checkbox"] + .wpcf7-list-item-label:before {
  content: '';
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
  background: #008aff;
}

<input type="checkbox" name="checkbox001[]" value="Połączyć wewnętrzne silosy">
<label for="checkbox001[]" class="wpcf7-list-item-label">Option a</label>
<span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox001[]" value="Poprawić zaangażowanie pracowników">&nbsp;<span for="checkbox001[]" class="wpcf7-list-item-label">Option b</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox001[]" value="Otrzymywać niefiltrowany feedback z terenu">&nbsp;<span class="wpcf7-list-item-label">Option c</span></span>

复选框在 HTML 中出现在伪元素之前，因此位于它的后面。要修复，请进行以下更改:

• 将 z-index: 1; 添加到 input[type="checkbox"] 以将复选框置于伪元素上方，因此可点击
• 在 input[type="checkbox"] 上设置 width 和 height 以使其匹配伪元素的尺寸<

input[type="checkbox"] {
  height: 28px;
  opacity: 0;
  position: absolute;
  width: 28px;
  z-index: 1;
}
input[type="checkbox"],
.wpcf7-list-item-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.wpcf7-list-item-label {
  position: relative;
}
input[type="checkbox"] + .wpcf7-list-item-label:before {
  content: '';
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
  background: #008aff;
}

<input type="checkbox" name="checkbox001[]" value="Połączyć wewnętrzne silosy">
<label for="checkbox001[]" class="wpcf7-list-item-label">Option a</label>
<span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox001[]" value="Poprawić zaangażowanie pracowników">&nbsp;<span for="checkbox001[]" class="wpcf7-list-item-label">Option b</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox001[]" value="Otrzymywać niefiltrowany feedback z terenu">&nbsp;<span class="wpcf7-list-item-label">Option c</span></span>