纯 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>

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

Pure CSS checkboxes doesn't work in WordPress

html

css

wordpress

contact-form-7