Title: Styling CF7 checkbox elements with CSS
Last modified: August 30, 2016

---

# Styling CF7 checkbox elements with CSS

 *  [mengsel](https://wordpress.org/support/users/mengsel/)
 * (@mengsel)
 * [11 years ago](https://wordpress.org/support/topic/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://wordpress.org/plugins/contact-form-7/](https://wordpress.org/plugins/contact-form-7/)

The topic ‘Styling CF7 checkbox elements with CSS’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

## Tags

 * [contact](https://wordpress.org/support/topic-tag/contact/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [form](https://wordpress.org/support/topic-tag/form/)
 * [styling](https://wordpress.org/support/topic-tag/styling/)

 * 0 replies
 * 1 participant
 * Last reply from: [mengsel](https://wordpress.org/support/users/mengsel/)
 * Last activity: [11 years ago](https://wordpress.org/support/topic/styling-cf7-checkbox-elements-with-css/)
 * Status: not resolved