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

Question

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

我在通过联系表单7创建的表单上遇到问题，我不确定这是否是与使用yarn或其他东西进行构建过程有关的问题。问题出在我已添加到表单的复选框中。它可以在桌面显示器上正常工作，但是当在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;
      }

    }

我很欣赏可能应用了一些不需要的样式，但是它们不会影响复选框的功能。找到适合该特定网站的正确解决方案后，我将清理所应用的样式，并删除所有不必要的样式。

[如果有人知道为什么该复选框无法在本网站上运行，当他们在我建立的其他网站上运行良好时，我将非常感谢您提供的任何提示或建议。

感谢您，如果您需要有关此问题的更多信息，请先询问，我确定我可以清除所有需要的信息。

Answer 1

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

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

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