用自定义 CSS 图像复选框替换联系表单 7 复选框

问题描述 投票：0回答：1

我有一个使用 WordPress 联系表单 7 创建的联系表单，其中包含复选框。我想将它们设计为图像复选框，以使它们更加突出。实际上，我发现了一个很好的复选框样式，我已经在页面上创建了它。我只需要一些帮助将其集成到联系表 7 中。

这是它所在的具体页面：https://www.mattrittman.com/animation-licensing-v2/

本质上只是想要白框中的内容替换该页面下面表格中的标准复选框。

这是我的自定义图像复选框的代码片段：

* {
  font-family: Lato;
  margin: 0;
  padding: 0;
  --transition: 0.15s;
  --border-radius: 0.5rem;
  --background: #0077ef;
  --box-shadow: #0077ef;
}

.cont-main {
  display: flex;
  flex-wrap: wrap;
  align-content: left;
  justify-content: left;
}

.cont-checkbox {
  width: 150px;
  height: 100px;
  border-radius: var(--border-radius);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  background: white;
  transition: transform var(--transition);
  margin: 0 8px;
}

.cont-checkbox:first-of-type {
  margin-bottom: 0.75rem;
  /*margin-right: 0.75rem;*/
}

.cont-checkbox:active {
  transform: scale(0.9);
}

.cont-checkbox input {
  display: none;
}

.cont-checkbox input:checked + label {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--background);
}

.cont-checkbox input:checked + label img {
  -webkit-filter: none; /* Safari 6.0 - 9.0 */
  filter: none;
}

.cont-checkbox input:checked + label .cover-checkbox {
  opacity: 1;
  transform: scale(1);
}

.cont-checkbox input:checked + label .cover-checkbox svg {
  stroke-dashoffset: 0;
}

.cont-checkbox label {
  display: inline-block;
  cursor: pointer;
  border-radius: var(--border-radius);
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0.6;
}

.cont-checkbox label img {
  width: 100%;
  height: 70%;
  object-fit: cover;
  clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%);
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.cont-checkbox label .cover-checkbox {
  position: absolute;
  right: 4px;
  top: 3px;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--box-shadow);
  border: 2px solid #fff;
  transition: transform var(--transition),
    opacity calc(var(--transition) * 1.2) linear;
  opacity: 0;
  transform: scale(0);
}

.cont-checkbox label .cover-checkbox svg {
  width: 11px;
  height: 10px;
  display: inline-block;
  vertical-align: top;
  fill: none;
  margin: 4px 0 0 3px;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  transition: stroke-dashoffset 0.4s ease var(--transition);
  stroke-dashoffset: 16px;
}

.cont-checkbox label .info {
  text-align: center;
  margin-top: -1.6rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: #000;
}
<div class="cont-main">
  <div class="cont-checkbox">
    <input type="checkbox" id="myCheckbox-1" />
    <label for="myCheckbox-1">
      <img
        src="https://www.mattrittman.com/wp-content/uploads/2024/08/glock-thumb.jpg"
      />
      <span class="cover-checkbox">
        <svg viewBox="0 0 12 10">
          <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class="info">How a Glock Works</div>
    </label>
  </div>
  <div class="cont-checkbox">
    <input type="checkbox" id="myCheckbox-2" />
    <label for="myCheckbox-2">
      <img
        src="https://www.mattrittman.com/wp-content/uploads/2024/08/ar15-thumb.jpg"
      />
      <span class="cover-checkbox">
        <svg viewBox="0 0 12 10">
          <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class="info">How an AR-15 Works</div>
    </label>
  </div>
    <div class="cont-checkbox">
    <input type="checkbox" id="myCheckbox-3" />
    <label for="myCheckbox-3">
      <img
        src="https://www.mattrittman.com/wp-content/uploads/2024/08/gas-system-thumb.jpg"
      />
      <span class="cover-checkbox">
        <svg viewBox="0 0 12 10">
          <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class="info">AR-15 Gas System</div>
    </label>
  </div>
    <div class="cont-checkbox">
    <input type="checkbox" id="myCheckbox-4" />
    <label for="myCheckbox-4">
      <img
        src="https://www.mattrittman.com/wp-content/uploads/2024/08/revolver-thumb.jpg"
      />
      <span class="cover-checkbox">
        <svg viewBox="0 0 12 10">
          <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class="info">How a Revolver Works</div>
    </label>
  </div>
    <div class="cont-checkbox">
    <input type="checkbox" id="myCheckbox-5" />
    <label for="myCheckbox-5">
      <img
        src="https://www.mattrittman.com/wp-content/uploads/2024/08/shotgun-thumb.jpg"
      />
      <span class="cover-checkbox">
        <svg viewBox="0 0 12 10">
          <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class="info">How a Shotgun Works</div>
    </label>
  </div>
    <div class="cont-checkbox">
    <input type="checkbox" id="myCheckbox-6" />
    <label for="myCheckbox-6">
      <img
        src="https://www.mattrittman.com/wp-content/uploads/2024/08/kar98k-thumb.jpg"
      />
      <span class="cover-checkbox">
        <svg viewBox="0 0 12 10">
          <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class="info">How a Kar98k Works</div>
    </label>
  </div>
    <div class="cont-checkbox">
    <input type="checkbox" id="myCheckbox-7" />
    <label for="myCheckbox-7">
      <img
        src="https://www.mattrittman.com/wp-content/uploads/2024/08/ak47-thumb.jpg"
      />
      <span class="cover-checkbox">
        <svg viewBox="0 0 12 10">
          <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class="info">How an AK-47 Works</div>
    </label>
  </div>
    <div class="cont-checkbox">
    <input type="checkbox" id="myCheckbox-8" />
    <label for="myCheckbox-8">
      <img
        src="https://www.mattrittman.com/wp-content/uploads/2024/08/ac-thumb.jpg"
      />
      <span class="cover-checkbox">
        <svg viewBox="0 0 12 10">
          <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
        </svg>
      </span>
      <div class="info">How A/C Works</div>
    </label>
  </div>
</div>
</div>

这是 CF7 生成的代码：

<span class="wpcf7-form-control-wrap" data-name="videos">
    <span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required">
        <span class="wpcf7-list-item">
            <label>
                <input type="checkbox" name="videos[]" value="How a Glock Works" />
                <span class="wpcf7-list-item-label">How a Glock Works</span>
            </label>
        </span>
        <span class="wpcf7-list-item">
            <label>
                <input type="checkbox" name="videos[]" value="How an AR-15 Works" />
                <span class="wpcf7-list-item-label">How an AR-15 Works</span>
            </label>
        </span>
        <span class="wpcf7-list-item">
            <label>
                <input type="checkbox" name="videos[]" value="AR-15 Gas System" />
                <span class="wpcf7-list-item-label">AR-15 Gas System</span>
            </label>
        </span>
        <span class="wpcf7-list-item">
            <label>
                <input type="checkbox" name="videos[]" value="How a Revolver Works" />
                <span class="wpcf7-list-item-label">How a Revolver Works</span>
            </label>
        </span>
        <span class="wpcf7-list-item">
            <label>
                <input type="checkbox" name="videos[]" value="How a Shotgun Works" />
                <span class="wpcf7-list-item-label">How a Shotgun Works</span>
            </label>
        </span>
        <span class="wpcf7-list-item">
            <label>
                <input type="checkbox" name="videos[]" value="How a Kar98k Works" />
                <span class="wpcf7-list-item-label">How a Kar98k Works</span>
            </label>
        </span>
        <span class="wpcf7-list-item">
            <label>
                <input type="checkbox" name="videos[]" value="How an AK-47 Works" />
                <span class="wpcf7-list-item-label">How an AK-47 Works</span>
            </label>
        </span>
        <span class="wpcf7-list-item">
            <label>
                <input type="checkbox" name="videos[]" value="How Air Conditioning Works" />
                <span class="wpcf7-list-item-label">How Air Conditioning Works</span>
            </label>
        </span>
    </span>
</span>

html css wordpress forms
1个回答
0
投票

如果您在生成复选框时关闭“用标签元素包裹每个项目”选项（或从生成的 CF7 复选框标记中删除 

use_label_element
选项），则生成的 HTML 代码在结构上将更接近呈现的代码你漂亮的复选框：

<span class="wpcf7-form-control-wrap" data-name="checkbox-889">
  <span class="wpcf7-form-control wpcf7-checkbox">
    <span class="wpcf7-list-item first">
      <input type="checkbox" name="checkbox-889[]" value="one">
      <span class="wpcf7-list-item-label">one</span>
    </span>
    <span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox-889[]" value="two">
      <span class="wpcf7-list-item-label">two</span>
    </span>
    <span class="wpcf7-list-item last">
      <input type="checkbox" name="checkbox-889[]" value="three">
      <span class="wpcf7-list-item-label">three</span>
    </span>
  </span>
</span>

然后，您可以将每个 

.wpcf7-list-item-label
元素的内容替换为漂亮复选框中的标签内容 - 
<img>
、
<svg>
和 
<div>
（尽管您需要将 
<div>
更改为一个
<span>
。

那么只需在已有的样式规则中添加一些选择器即可，使它们也适用于 CF7 结构。因此，例如，采用以下样式规则：

.cont-checkbox label {
  display: inline-block;
  cursor: pointer;
  border-radius: var(--border-radius);
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0.6;
}

CF7 结构的等效选择器是 

.wpcf7-list-item-label .wpcf7-list-item-label
，因此您只需将样式规则中的选择器更改为：

.cont-checkbox label, .wpcf7-list-item-label .wpcf7-list-item-label {
  ...
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.