自定义样式的复选框（联系表格 7）在 iPhone 上不起作用答案

【问题标题】：Custom styled checkbox (contact form 7) not working on iPhone自定义样式的复选框（联系表格 7）在 iPhone 上不起作用
【发布时间】：2020-02-24 08:44:03
【问题描述】：

我一直在开发一个使用引导模板在 WordPress 中构建的网站。这个网站最初不是我建的，所以在实施更改时我时常会遇到麻烦。该网站使用 yarn 从 node.js 模块和主题文件夹中包含的元素构建一个“dist”文件夹。样式表是 scss 文件。构建过程完成后，它创建了一个“dist”文件夹，该文件夹将上传到主题文件夹，其中包含所有组合的样式表、图像等。

我遇到了通过联系表 7 创建的表单的问题，我不确定这是否与使用纱线或其他东西的构建过程有关。问题在于我添加到表单中的复选框。它在桌面显示器上按预期工作，但是当在 iPhone 上（通过 Chrome、Safari 和 Google 浏览器应用程序）查看该网站时，单击时不会出现复选框。

为了澄清，我自己建立的最后几个网站，包括一个带有一个或多个复选框的表单，在桌面和 IOS 设备上都可以完美运行。我使用 css 样式表而不是 scss，但我在运行良好的网站和在 IOS 上不工作的网站上都使用了所有相同的样式，所以我真的不明白为什么复选框不能在移动设备上工作。我还尝试应用了一些其他修复，但这些修复也无助于解决问题。

网站复选框部分的html代码和scss代码请见下文：

<div class="af-field af-field-type-checkbox af-field-checkbox acf-field acf-field-checkbox">
<div class="af-label acf-label">
            <label for="brochure-pack-checkbox">Please send me a Giraffe Equity Release brochure pack</label>
        </div>
<div class="af-input acf-input">
<div class="acf-input-wrap">
                <span class="wpcf7-form-control-wrap brochure-pack"><span class="wpcf7-form-control wpcf7-checkbox" id="brochure-pack-checkbox"><span class="wpcf7-list-item first last"><label><input type="checkbox" name="brochure-pack[]" value="Please send me a Giraffe Equity Release brochure pack"><span class="wpcf7-list-item-label">Please send me a Giraffe Equity Release brochure pack</span></label></span></span></span>
            </div>
<p></p></div>
<p></p></div>

    .acf-field-checkbox {

      .wpcf7-list-item {
        position: relative;
        margin-left: 0;
        width: 100%;
        display: block;
      }

      .wpcf7-list-item-label {
        font-size: 2rem;
        font-weight: 600;
        line-height: 1.5em;
        margin-left: 35px;
        display: block;
        cursor: pointer;
      }

      .wpcf7-list-item-label:before {
        position: absolute;
        left: 0;
        width: 28px;
        height: 28px;
        border: 1px solid #b79c68;
        border-radius: .25rem;
        display: block;
      }

      .wpcf7-list-item-label:after {
        position: absolute;
        content: '\1F5F8';
        font-size: 30px;
        color: #b79c68;
        width: 0px;
        height: 0px;
        top: 2px;
        left: 2px;
        opacity: 0;
      }

      input[type=checkbox] {
        display: none;
        -webkit-appearance: checkbox;
      }

      input[type=checkbox]:checked {

        + span.wpcf7-list-item-label:after {
          opacity: 1;
        }

      }

      label {
        margin-bottom: 0;
        cursor: pointer;
        display: block;
      }

    }

我很欣赏可能应用了一些不需要的样式，但它们不会影响复选框功能。一旦我找到了正确的解决方案来使它适用于这个特定的网站，我将清理应用的样式并删除任何不必要的样式。

如果有人知道为什么该复选框在此网站上无法正常工作，当他们在我构建的其他网站上正常工作时，我将非常感谢您提供的任何提示或建议。

提前致谢，如果您需要有关此问题的更多信息，请询问，我相信我可以解决任何需要的问题。

【问题讨论】：

标签： node.js wordpress checkbox sass contact-form-7

【解决方案1】：

对于任何感兴趣或有类似问题的人，此问题的原因是：

.wpcf7-list-item-label:after {
  content: '\1F5F8';
}

由于某种原因，代码在桌面上而不是 IOS 上呈现了勾号。更改为另一个刻度代码并解决了问题。

【讨论】：