CODEWITHSUNDEEP
jquerycsswordpresscheckbox
Bird87 ZA
Bird87 ZA

Reputation: 2160

Show when item is checked with custom checkbox

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)?

Upvotes: 0

Views: 976

Answers (2)

Turnip
Turnip

Reputation: 36702

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>

Upvotes: 1

epascarello
epascarello

Reputation: 207527

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>

Upvotes: 0

Related Questions