Question

首先，我提前为我的无知道歉，我对这种事情很新，但是想要学习......

所以我的问题是我试图创建6个网格中显示的6个复选框，这个复选框是我在这个网站的帮助下创建的。

.select-size input {
  display: none;
}

label {
  display: inline-block;
  width: 150px;
  height: 80px;
  text-align: center;
  border: 2px solid #FD484E;
  line-height: 80px;
  cursor: pointer;
  font-family: sans-serif;
  margin: 5px;
}

#windows:checked~label[for="windows"],
#doors:checked~label[for="doors"],
#roofline:checked~label[for="roofline"],
#conservatories:checked~label[for="conservatories"],
#extensions:checked~label[for="extensions"],
#repairs:checked~label[for="repairs"] {
  background: #FD484E;
  color: #fff;
}

<div class="select-size">
  <input type="checkbox" name="s-size" id="windows" />
  <input type="checkbox" name="s-size" id="doors" />
  <input type="checkbox" name="s-size" id="roofline" />
  <input type="checkbox" name="s-size" id="conservatories" />
  <input type="checkbox" name="s-size" id="extensions" />
  <input type="checkbox" name="s-size" id="repairs" />

  <label for="windows">Windows</label>
  <label for="doors">Doors</label>
  <label for="roofline">Roofline</label>
  <label for="conservatories">Conservatories</label>
  <label for="extensions">Extensions</label>
  <label for="repairs">Repairs</label>
</div>

我的联系表格7代码：

 <div class="row">
<div class="col-xs-12 col-lg-6">

[text* your-name placeholder "Your Name"]

[email* your-email placeholder "Your Email"]

[tel* tel-395 placeholder "Your Telephone"]



</div>

<div class="col-xs-12 col-lg-6">

[checkbox* checkbox-495 id:checkbox use_label_element "Windows" "Doors" "Conservatories" "Roofline" "Extensions" "Repairs"]

</div>
</div>

<div class="row vertical-center">
<div class="col-xs-12 col-lg-6">
<p>We will contact you within one business day.</p>
</div>
<div class="col-xs-12 col-lg-6 submit-button-align-right">
[submit "Send Message"]
</div>
</div>

现在....我被困在如何将两者合并在一起？这是我的头脑，我通常可以通过一般位，但这真的让我难过。

如果有人能给我任何帮助，我们将非常感激

先谢谢，

问候

Answer 1

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

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

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

This code will generate:

一组两个复选框
- 两者中的每一个都包含在一个元素中（文本本身是
  在a）
- 父元素的id =＆＃34; my-checkboxes＆＃34;`
  
  因此输出标记看起来像这样（以及一些 wpcf7和Wordpress类）
FOO 酒吧

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

例如#mycheckboxes＆gt;标签＆gt;输入和#mycheckboxes＆gt;标签＆gt;输入+跨度。

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

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

希望这有助于感谢你

Answer 2

try this for 3 box per row
<div class="row">
    <div class="col-xs-12 col-lg-6">
      <label for="windows">Windows</label>
      <input type="checkbox" name="s-size" id="windows" />
      <label for="doors">Doors</label>
      <input type="checkbox" name="s-size" id="doors" />
      <label for="roofline">Roofline</label>
      <input type="checkbox" name="s-size" id="roofline" />
    </div>
    </div>
    <div class="row">
    <div class="col-xs-12 col-lg-6">
      <label for="conservatories">Conservatories</label>
      <input type="checkbox" name="s-size" id="conservatories" />
      <label for="extensions">Extensions</label>
      <input type="checkbox" name="s-size" id="extensions" />
      <label for="repairs">Repairs</label>
      <input type="checkbox" name="s-size" id="repairs" />
    </div>
    </div>

Answer 3

到达那里，框不会在选择时突出显示，并且无法隐藏原始复选框。

人？

contact snippet

#checkbox {
  display: none;
}

.checkbox {
  float: left;
  width: 150px;
  height: 80px;
  text-align: center;
  border: 2px solid #FD484E;
  line-height: 80px;
  cursor: pointer;
  font-family: sans-serif;
  margin: 2px;
}

#windows:checked~label[for="windows"],
#doors:checked~label[for="doors"],
#roofline:checked~label[for="roofline"],
#conservatories:checked~label[for="conservatories"],
#extensions:checked~label[for="extensions"],
#repairs:checked~label[for="repairs"] {
  background: #FD484E;
  color: #fff;
}

<div class="row">
  <div class="col-xs-12 col-lg-6">

    [text* your-name placeholder "Your Name"] [email* your-email placeholder "Your Email"] [tel* tel-395 placeholder "Your Telephone"]



  </div>

  <div class="col-xs-12 col-lg-6">

    [checkbox* checkbox-203 id:windows class:checkbox use_label_element "Windows"] [checkbox* checkbox-203 id:doors class:checkbox use_label_element "Doors"] [checkbox* checkbox-203 id:conservatories class:checkbox use_label_element "Conservatories"] [checkbox*
    checkbox-203 id:roofline class:checkbox use_label_element "Roofline"] [checkbox* checkbox-203 id:extensions class:checkbox use_label_element "Extensions"] [checkbox* checkbox-203 id:repairs class:checkbox use_label_element "Repairs"]

  </div>
</div>

<div class="row vertical-center">
  <div class="col-xs-12 col-lg-6">
    <p>We will contact you within one business day.</p>
  </div>
  <div class="col-xs-12 col-lg-6 submit-button-align-right">
    [submit "Send Message"]
  </div>
</div>

联系表格7复选框样式

3 个答案: