I discovered some amazing pure CSS checkboxes that I wanted to implement (http://codepen.io/imohkay/pen/zFwec) on a WordPress website utilizing the Contact Form 7 plugin. However, after selecting these checkboxes, nothing seems to happen.
To resolve this issue, I decided to copy the entire CSS code and modify the classes to align with the HTML structure generated by Contact Form 7 on WordPress.
Here is the HTML code snippet:
input[type="checkbox"] {
opacity: 0;
position: absolute;
}
input[type="checkbox"],
.wpcf7-list-item-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.wpcf7-list-item-label {
position: relative;
}
input[type="checkbox"] + .wpcf7-list-item-label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
background: #008aff;
}<input type="checkbox" name="checkbox001[]" value="Integrate internal silos">
<label for="checkbox001[]" class="wpcf7-list-item-label">Option A</label>
<span class="wpcf7-list-item">
<input type="checkbox" name="checkbox001[]" value="Enhance employee engagement"> <span for="checkbox001[]" class="wpcf7-list-item-label">Option B</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox001[]" value="Receive unfiltered field feedback"> <span class="wpcf7-list-item-label">Option C</span></span>I'm struggling to pinpoint the issue in this setup