联系表格 7 中的样式复选框答案

【问题标题】：Styling checkboxes in Contact form 7联系表格 7 中的样式复选框
【发布时间】：2015-11-04 17:47:25
【问题描述】：

当使用 CSS 自定义复选框的外观时，为了能够发挥神奇作用，我们首先需要将元素（例如标签）链接到复选框。

<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">

但是，我使用的是联系表格 7（wordpress 插件），但我找不到在复选框中添加 id 的位置。如果您在 CF7 中指定 id，它会将其添加到包含的 div (.wpcf7-form-control)，而不是复选框本身。

因此我无法让它工作。

我错过了什么吗？还有其他方法可以链接标签和复选框吗？

非常感谢

【问题讨论】：

标签： wordpress forms checkbox

【解决方案1】：

Contact Form 7 使用的格式与您的 HTML 略有不同，但有一些定位选项应该足以抓取您需要的任何元素。

在创建表单时，您将生成一个类似于这样的复选框短代码。

[checkbox my-checkbox id:my-checkboxes use_label_element "foo" "bar"]

此代码将生成：

一组两个复选框
两者中的每一个都包含在 <label> 元素中（文本本身在 <span> 中）
id="my-checkboxes"`的父元素

所以输出标记看起来像这样（以及一些 wpcf7 和 Wordpress 类）。

<span id="my-checkboxes">
    <label>
      <input type="checkbox" value="foo" /><span>foo</span>
    </label>
    <label>
      <input type="checkbox" value="bar" /><span>bar</span>
    </label>
</span>

由于您在父元素上有一个 ID，您可以使用 CSS 或 JQuery 中的选择器来定位表单的这个特定部分和其中的元素。

例如#mycheckboxes > label > input 和#mycheckboxes > label > input + span。

为了获得更好的定位选项，您还可以为每个短代码创建一个复选框，并为每个 <span> 复选框容器分配一个 ID。

[checkbox my-checkbox id:a-checkbox use_label_element "foo"]
[checkbox my-checkbox2 id:another-checkbox use_label_element "bar"]

由于您的最终目标是将信息输入 Contact Form 7（可能是通过电子邮件发送到某个地方），因此您是否使用单独的短代码创建每个复选框都没关系。

【讨论】：