我不确定这是否是WordPress特定的问题，但当我在侧边栏中创建一个简单表单作为小部件时，当我单击标签时，复选框不会选中。奇怪的是，当我通过get\\u template\\u部分将相同的表单拉入导航时，它确实可以工作。我想使用“复选框破解”，它依赖于标签的可点击性。我的表单如下所示：

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

这两种形式都可以在littlefishfx找到。com/contact，一个从主菜单“订阅”按钮中下拉，另一个（相同的表单）在侧边栏的最底部。

关于为什么会发生这种情况，有什么建议吗？Chrome、Safari和Firefox（mac）也有同样的结果。

**编辑**

如果我将复选框包装在标签中，如

<label><input id="fieldjtdktry-0" name="cm-fo-jtdktry" value="4469820" type="checkbox" /><span></span>Learn</label>

然后，标签点击在所有方面都起作用。这看起来是一个最佳实践解决方案（？）但让我困惑的是，如何使用我最初试图实现的复选框黑客。以下是我一直在研究的CSS：

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;
}

<label><input id="fieldjtdktry-0" name="cm-fo-jtdktry" value="4469820" type="checkbox" /><span></span>Learn</label>

label input[type="checkbox"] + span {

input[type="checkbox"] + label span {