I want to change my Checkbox from black to red when its checked but couldn’t able to 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 helpfull if you can point out my error or am i missing something.

Demo

Read more here: Custom Checkbox not working in Contact Form 7


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: