Show when item is checked with custom checkbox

Question

I am using Wordpress to build a site with custom checkboxes (obviously it's a bit more than that, but this is what my concern boils down to). I can show the custom checkbox, but I can't show when it's ticked. Can anybody assist with the CSS to get this working?

Here is the layout and CSS I have of the checkbox as generated by Wordpress and the Contact Form 7 plugin:

input[type=checkbox] {
  display: none;
}
.wpcf7-list-item label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  left: 0;
  position: relative;
  top: 3px;
  background-color: #fff;
  border: 2px #3f9abb solid;
  border-radius: 2px;
}

 <span class="wpcf7-list-item first">
        <label>
            <input type="checkbox" name="community[]" value="Community Member">
            &nbsp;
            <span class="wpcf7-list-item-label">Community Member</span>
</label>
</span>

I've tried following this guide, but no luck. Is there someone who can assist with just getting the tick to show (and obviously still have it submit when the form is submitted)?

this already been asked on http://stackoverflow.com/questions/21968531/how-to-draw-a-checkmark-tick-using-css — Apul Gupta, Sep 25 '14 at 12:52

Turnip · Accepted Answer · 2014-09-25T12:55:47.280

input[type=checkbox] {
  display: none;
}
.wpcf7-list-item label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  left: 0;
  position: relative;
  top: 3px;
  background-color: #fff;
  border: 2px #3f9abb solid;
  border-radius: 2px;
}

input[type=checkbox]:checked + label:before {
background: blue;
}

 <span class="wpcf7-list-item first">
     <input id="checkbox" type="checkbox" name="community[]" value="Community Member">
        <label for="checkbox">
            <span class="wpcf7-list-item-label">Community Member</span>
        </label>
</span>

UPDATE - Using your current markup

input[type=checkbox] {
  display: none;
}
.wpcf7-list-item label > span:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  left: 0;
  position: relative;
  top: 3px;
  background-color: #fff;
  border: 2px #3f9abb solid;
  border-radius: 2px;
}

input[type=checkbox]:checked + span:before {
    background: blue;
}

 <span class="wpcf7-list-item first">
        <label>
             <input type="checkbox" name="community[]" value="Community Member">
            <span class="wpcf7-list-item-label">Community Member</span>
        </label>
</span>

Since it's generated code, I can't change the order of it. Unless you can provide a jquery method that can do that. — Bird87 ZA, Sep 25 '14 at 12:52
PERFECT! Thanks so much. Going to try and test it now, will accept if it works 100% :) — Bird87 ZA, Sep 25 '14 at 12:58

score 0 · Answer 2 · answered Sep 25 '14 at 12:47

Well if you change the code around slightly you can use input:checked + label to update the style when checked.

input[type=checkbox] {
  display: none;
}
.wpcf7-list-item label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  left: 0;
  position: relative;
  top: 3px;
  background-color: #fff;
  border: 2px #3f9abb solid;
  border-radius: 2px;
}


.wpcf7-list-item input:checked + label:before { background-color: red; }

 <span class="wpcf7-list-item first">
        <input type="checkbox" name="community[]" value="Community Member" id="foo">
        <label for="foo"><span class="wpcf7-list-item-label">Community Member</span></label>
 </span>

Since it's generated code, I can't change the order of it. Unless you can provide a jquery method that can do that. — Bird87 ZA, Sep 25 '14 at 12:53

Show when item is checked with custom checkbox

2 Answers2