Styling CF7 checkbox elements with CSS

Hi there,

Just curious if anyone has any experience or tips on using CSS to style the checkbox element. Because, different from the text input elements, dropdowns etc which are much easier to adjust with simple CSS tweaks directly to the element, the checkbox element requires a combination of CSS and HTML.

So the way CF7 renders a checkbox within the form is

<div> <!-- wrapper -->
  <input> <!-- the actual checkbox -->
  <div class="label">Label text</div>
</div>

Basically substituting the <label> element with a div with a label class. Unfortunately it does not behave the same way a label does (like how you can click the label to check the box rather than check the actual box).

Anyway, what I was trying to do is basically make a simply big square with a colored x when checked. But it’s been troublesome. Any and all tips are welcome =)

https://ww.wp.xz.cn/plugins/contact-form-7/