Custom Checkbox not working in Contact Form 7

Question

I want to change my Checkbox from black to red when it's checked but couldn't get the result. Please check the code:

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>


   

It would be really helpful if you can point out my error. Am I missing something?

Demo

Answer 1

UPDATED

Since you don't have control over the generated HTML, you can do this using javascript/jQuery

jQuery: jsFiddle 1 ^updated

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

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

---

Pure 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 2

There are 2 ways to solve this issue.

1. If you can edit the html, you just need to wrap the dom in <label>. Check this first input "1000" in the below fiddle.
2. If you cannot edit the html, I have written the JS code to implement same in the below 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);
    }

  });
});

Answer 3

Please try to add this 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;
}