I have a Wordpress CF7 form which uses checboxes of two kinds, normal checkbox and acceptance checkbox. I used acceptance checkboxes, then it turned out I need more than 1 checkboxes, but this plugin supports only 1 acceptance box, hence I need to add a normal checkbox too.
So far I managed to style pretty well the acceptance checkbox, which has this code:
<div class="checkbox2">
<span class="wpcf7-form-control-wrap your-consent">
<span class="wpcf7-form-control wpcf7-acceptance optional">
<span class="wpcf7-list-item">
<label class="container">
<input type="checkbox" name="your-consent" value="1" aria-invalid="false" class="acceptance">
<span class="wpcf7-list-item-label checkmark"> </span>
</label>
</span>
</span>
</span>
<span class="checkbox-text">I consent</span></div>
</div>
Now I am struggling to create new css for the normal checkbox. It has a different HTML structure, which I can't change.
<div class="checkbox1">
<span class="wpcf7-form-control-wrap checkbox-766 container">
<span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required acceptance">
<span class="wpcf7-list-item first last">
<input type="checkbox" name="checkbox-766[]" value="I agree ">
<span class="wpcf7-list-item-label">I agree to the privacy policy</span>
</span>
</span>
</span>
</div>
Can anyone help me to apply the code of checkbox2 to checkbox1?
It can be completely new css/scss, doesn't matter if it stops working for checkbox2. I will add it with a parent #id and both will work fine.
Here is the code in codepen.
Aucun commentaire:
Enregistrer un commentaire