title: Contact Form 7 pure CSS checkbox styling
body: <p>I want to style my CF7 checkbox using pure css.</p>
  
  <p>I have placed it within a label and used this code.</p>
  
  <pre><code>.wpcf7-checkbox label input {
  position: absolute;
  margin-left: 6px !important;
  right: 0;
  width: auto;
  opacity: 0;
  }
  
  .wpcf7-checkbox label span.wpcf7-list-item-label:before {
  content: '' !important;
  border: 2px solid #dbdbdb !Important;
  border-radius: 5px !Important;
  cursor: pointer !Important;
  display: inline-block !important;
  float: right !Important;
  height: 49px !important;
  position: relative !Important;
  top: 0 !important;
  margin-left: 20px !important;
  margin-top: -15px !Important;
  width: 48px !important;
  }
  
  .wpcf7-checkbox input:checked+span.wpcf7-list-item-label:before {
  background-color: #000 !important;
  background-image: url(http://test.unknowndesign.co.za/wp-content/uploads/2018/02/checkbox_tick.svg) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 80% !important;
  }
  </code></pre>
  
  <p>Here is the HTML for the checkbox:</p>
  
  <pre><code>&lt;span class="newsletter"&gt;&lt;span class="wpcf7-form-control-wrap mailchimp"&gt;&lt;span class="wpcf7-form-control wpcf7-checkbox"&gt;&lt;span class="wpcf7-list-item first last"&gt;&lt;label&gt;&lt;span class="wpcf7-list-item-label"&gt;Sign up for our newsletter&lt;/span&gt;&lt;input type="checkbox" name="mailchimp[]" value="Sign up for our newsletter" /&gt;&lt;/label&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
  </code></pre>
  
  <p>But when I click in the checkbox, the checkbox tick doesn't display. What am I doing wrong?</p>