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

Posted 2023-03-05

【中文标题】纯 CSS 复选框在 WordPress 中不起作用

【英文标题】：Pure CSS checkboxes doesn't work in WordPress

【发布时间】：2016-01-07 10:42:18

【问题描述】：

我在使用 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>

我找不到这里有什么问题

【参考方案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>