自定义复选框在 Contact Form 7 中不起作用

Question

我想在选中时将我的复选框从黑色更改为红色，但无法获得结果。请检查代码

HTML

 .wpcf7-checkbox, .radio {
      display: block;
      margin: 10px 0 0;
    }
    .wpcf7-checkbox .wpcf7-list-item, .radio .wpcf7-list-item {
      display: block;
    }
    .wpcf7-checkbox .wpcf7-list-item input[type=checkbox], .wpcf7-checkbox .wpcf7-list-item input[type=radio], .radio .wpcf7-list-item input[type=checkbox], .radio .wpcf7-list-item input[type=radio] {
      display: none;
    }
    .wpcf7-checkbox .wpcf7-list-item input[type=checkbox]:checked + .wpcf7-list-item-label::before, .wpcf7-checkbox .wpcf7-list-item input[type=radio]:checked + .wpcf7-list-item-label::before, .radio .wpcf7-list-item input[type=checkbox]:checked + .wpcf7-list-item-label::before, .radio .wpcf7-list-item input[type=radio]:checked + .wpcf7-list-item-label::before {
      background: #ffffff;
      border: 1px solid red;
      border-radius: 3px;
      content: "";
      height: 15px;
      left: -22px;
      position: absolute;
      width: 15px;
    }
    .wpcf7-checkbox .wpcf7-list-item-label, .radio .wpcf7-list-item-label {
      display: inline-block;
      font-family: "Arial", sans-serif;
      font-size: 14px;
      font-weight: normal;
      left: 15px;
      line-height: 14px;
      margin: 0 0 15px;
      position: relative;
    }
    .wpcf7-checkbox .wpcf7-list-item-label::before, .radio .wpcf7-list-item-label::before {
      background: #ffffff;
      border: 1px solid #000000;
      border-radius: 3px;
      content: "";
      height: 15px;
      left: -22px;
      position: absolute;
      width: 15px;
    }
    .wpcf7-checkbox .wpcf7-list-item-label:hover, .radio .wpcf7-list-item-label:hover {
      cursor: pointer;
    }

 <span class="wpcf7-form-control-wrap checkbox-191">
      <span class="wpcf7-form-control wpcf7-checkbox">
        <span class="wpcf7-list-item first">
          <input type="checkbox" name="checkbox-191[]" value="1000" />
          <span class="wpcf7-list-item-label">1000</span>
        </span>
        <span class="wpcf7-list-item">
          <input type="checkbox" name="checkbox-191[]" value="2000" />
          <span class="wpcf7-list-item-label">2000</span>
        </span>
        <span class="wpcf7-list-item">
          <input type="checkbox" name="checkbox-191[]" value="3000" />
          <span class="wpcf7-list-item-label">3000</span>
        </span>
        <span class="wpcf7-list-item">
          <input type="checkbox" name="checkbox-191[]" value="4000" />
          <span class="wpcf7-list-item-label">4000</span>
        </span>
        <span class="wpcf7-list-item last">
          <input type="checkbox" name="checkbox-191[]" value="5000" />
          <span class="wpcf7-list-item-label">5000</span>
        </span>
      </span>
    </span>

如果你能指出我的错误或者我遗漏了什么，那将非常有帮助。

Demo

Answer 1

请尝试添加此 css

.wpcf7-checkbox .wpcf7-list-item input[type=checkbox], .wpcf7-checkbox .wpcf7-list-item input[type=radio], .radio .wpcf7-list-item input[type=checkbox], .radio .wpcf7-list-item input[type=radio] {
    /* display: none; */
    position: absolute;
    z-index: 123;
    left: -1px;
    opacity: 0;
}

Answer 2

已更新

由于您无法控制生成的 HTML，您可以使用 javascript/jQuery

jQuery: jsFiddle 1 ^已更新

jQuery('.wpcf7-list-item-label').on('click', function() {
  var corrChkbx = jQuery(this).prev('input[type="checkbox"]'),
    checkedVal = corrChkbx.prop('checked');

  corrChkbx.prop('checked', !checkedVal);
})

纯JavaScript:jsFiddle 2

var labelSpans = document.getElementsByClassName('wpcf7-list-item-label');

for (var i = 0, ln = labelSpans.length; i < ln; i++) {
  addEv(labelSpans[i]);
}

function addEv($th) {
  $th.addEventListener('click', function() {
    var corrChkbx = $th.parentNode.querySelector('input[type="checkbox"]');
    corrChkbx.checked = !corrChkbx.checked;
  });
}

Answer 3

有两种方法可以解决这个问题。

如果您可以编辑 html，您只需将 dom 包裹在 <label> 中。检查下面 fiddle.
如果你不能编辑html，我已经在下面写了JS代码来实现同样的fiddle。

Fiddle: https://jsfiddle.net/a2k73v0y/2/

HTML:

    <span class="wpcf7-form-control-wrap checkbox-191">
  <span class="wpcf7-form-control wpcf7-checkbox">
    <label for="checkbox-191[]"><span class="wpcf7-list-item first">
      <input type="checkbox" name="checkbox-191[]" id="checkbox-191[]" value="1000" />
      <span class="wpcf7-list-item-label">1000</span>
    </span>
    </label>
    <span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox-191[]" value="2000" />
      <span class="wpcf7-list-item-label">2000</span>
    </span>
    <span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox-191[]" value="3000" />
      <span class="wpcf7-list-item-label">3000</span>
    </span>
    <span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox-191[]" value="4000" />
      <span class="wpcf7-list-item-label">4000</span>
    </span>
    <span class="wpcf7-list-item last">
      <input type="checkbox" name="checkbox-191[]" value="5000" />
      <span class="wpcf7-list-item-label">5000</span>
    </span>
  </span>
</span>

JS:

    $(function(){
    $(".wpcf7-list-item").click(function(){
    if($(this).find("input").attr("checked")){
        $(this).find("input").attr("checked",false);
    }else{
        $(this).find("input").attr("checked",true);
    }

  });
});

自定义复选框在 Contact Form 7 中不起作用

Custom Checkbox not working in Contact Form 7

html

css

wordpress

contact-form-7