Question

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

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

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

因此我无法让它发挥作用。

我错过了什么吗？还有另一种链接标签和复选框的方法吗？

非常感谢

Answer 1

联系表单7 使用的格式与您的HTML略有不同，但有些目标选项应足以获取您需要的任何元素。

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

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

此代码将生成：

一组两个复选框
两者中的每一个都包含在<label>元素中（文本本身位于<span>）
父元素，其id =＆＃34; my-checkboxes＆＃34;`

因此输出标记看起来像这样（以及一些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（可能是通过电子邮件发送到某个地方），因此如果您使用单独的短代码创建每个复选框并不重要。

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

1 个答案: