使用自定义复选框选中项目时显示

Question

我正在使用Wordpress来构建一个带有自定义复选框的网站（显然它不止于此，但这是我关注的问题）。我可以显示自定义复选框，但我无法显示它何时被勾选。任何人都可以帮助CSS来实现这个目的吗？

以下是Wordpress和Contact Form 7插件生成的复选框的布局和CSS：

＆＃13;

＆＃13;

input[type=checkbox] {
  display: none;
}
.wpcf7-list-item label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  left: 0;
  position: relative;
  top: 3px;
  background-color: #fff;
  border: 2px #3f9abb solid;
  border-radius: 2px;
}

＆＃13;

 <span class="wpcf7-list-item first">
        <label>
            <input type="checkbox" name="community[]" value="Community Member">
            &nbsp;
            <span class="wpcf7-list-item-label">Community Member</span>
</label>
</span>

＆＃13;

＆＃13;

＆＃13;

我已经尝试过遵循本指南，但没有运气。是否有人可以协助只显示勾号（显然仍然在提交表单时提交）？

Answer 1

input[type=checkbox] {
  display: none;
}
.wpcf7-list-item label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  left: 0;
  position: relative;
  top: 3px;
  background-color: #fff;
  border: 2px #3f9abb solid;
  border-radius: 2px;
}

input[type=checkbox]:checked + label:before {
background: blue;
}

 <span class="wpcf7-list-item first">
     <input id="checkbox" type="checkbox" name="community[]" value="Community Member">
        <label for="checkbox">
            <span class="wpcf7-list-item-label">Community Member</span>
        </label>
</span>

---

更新 - 使用您当前的标记

input[type=checkbox] {
  display: none;
}
.wpcf7-list-item label > span:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  left: 0;
  position: relative;
  top: 3px;
  background-color: #fff;
  border: 2px #3f9abb solid;
  border-radius: 2px;
}

input[type=checkbox]:checked + span:before {
    background: blue;
}

 <span class="wpcf7-list-item first">
        <label>
             <input type="checkbox" name="community[]" value="Community Member">
            <span class="wpcf7-list-item-label">Community Member</span>
        </label>
</span>

Answer 2

如果稍微更改代码，可以使用input:checked + label在检查时更新样式。

input[type=checkbox] {
  display: none;
}
.wpcf7-list-item label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  left: 0;
  position: relative;
  top: 3px;
  background-color: #fff;
  border: 2px #3f9abb solid;
  border-radius: 2px;
}


.wpcf7-list-item input:checked + label:before { background-color: red; }

 <span class="wpcf7-list-item first">
        <input type="checkbox" name="community[]" value="Community Member" id="foo">
        <label for="foo"><span class="wpcf7-list-item-label">Community Member</span></label>
 </span>