I’m not sure if this is a WordPress specific issue but when I create a simple form as a widget in my sidebar the checkbox won’t check when I click on the label. Strangely though, it does work when I’ve pulled the same form via get_template_part into my navigation. I want to use the ‘checkbox hack’ which relies upon the label being clickable. My form looks like:
<form action="http://email.littlefishfx.com/t/r/s/jijiat/" method="post">
<p class="checks">
<input id="fieldjtdktry-0" name="cm-fo-jtdktry" value="4469820" type="checkbox" /> <label for="fieldjtdktry-0"><span></span>Learn</label>
<input id="fieldjtdktry-1" name="cm-fo-jtdktry" value="4469821" type="checkbox" /> <label for="fieldjtdktry-1"><span></span>Trade</label>
<input id="fieldjtdktry-2" name="cm-fo-jtdktry" value="4469822" type="checkbox" /> <label for="fieldjtdktry-2"><span></span>Invest</label>
<input id="fieldjtdktry-3" name="cm-fo-jtdktry" value="4469823" type="checkbox" /> <label for="fieldjtdktry-3"><span></span>Spend</label>
</p>
<p>
<input id="fieldEmail" name="cm-jijiat-jijiat" type="email" required placeholder="Your email address" />
<br />
<button type="submit"><span>Subscribe</span></button>
</p>
</form>
Both forms can be found at littlefishfx.com/contact, one dropping down out of the main menu ‘subscribe’ button and another (same form) at the very bottom of the sidebar.
Any advice on why this might be happening? Same results in Chrome, Safari and Firefox (mac).
** EDIT **
If I wrap my check boxes in the label like
<label><input id="fieldjtdktry-0" name="cm-fo-jtdktry" value="4469820" type="checkbox" /><span></span>Learn</label>
Then label clicking works across the board. This looks a best practice solution (?) but leaves me stumped as to how to use the check box hack I was originally trying to implement. Here’s the CSS that I’ve been working on:
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label span {
display: inline-block;
width: 20px;
height: 20px;
margin: -1px 6px 0 0;
vertical-align: middle;
background: url(images/checkbox-sprite.gif) left top no-repeat;
cursor: pointer;
}
input[type="checkbox"]:checked + label span {
background: url(images/checkbox-sprite.gif) right top no-repeat;
}