html标签无线电可以在桌面和模拟器上工作，但不能在iOS Safari上工作

Question

我很难调试这个，但基本上我有一堆复选框，它们看起来都像下面的例子：

<div class="column">
  <input id="radio-10" type="radio" class="radio-custom" value="3">
  <label for="radio-10" class="radio-custom-label"><br>
  <p>Long time employed by the same employer</p></label>
</div>

在Chrome的模拟器中，如果我点击它，它就能正常工作。在桌面上，如果我点击它，它可以正常工作(复选框被选中)。在实际的iphone上，复选框永远不会被选中。

这里有什么值得注意的吗？或类似的问题。

我也不确定这是否重要(因为它可以在桌面和模拟器上工作，但不能在移动设备上工作)，这些都是使用vue.js动态创建的，如下所示：

<li v-for="(question, questionIndex) in questions">
                        <h2>{{ question.question }}</h2>

                        <div class="columns">

                          <div class="column" v-for="(answer, index) in question.answers">
                            <input 
                                :id=" 'radio-' + answer.id" 
                                :value='answer.points' 
                                class="radio-custom"  
                                v-model.number="chosen[ questionIndex ]" 
                                type="radio"
                            >
                            <label :for=" 'radio-'+ answer.id" class="radio-custom-label"><br><p>{{ answer.answer }}</p></label>
                          </div>

                        </div>

                        <div class="control is-grouped">
                            <p class="control">
                                <button class="button is-primary" 
                                        v-if="questionIndex != 0" 
                                        @click.prevent="back">
                                        Back
                                </button>
                            </p>

                            <p class="control">
                                <button class="button is-primary" 
                                        @click.prevent="next">
                                        Next
                                </button>
                            </p>

                        </div>

                    </li>

更新：

我删除了acutal单选按钮上的不透明度，可以看到它正在工作，尽管css没有添加复选标记。具体地说，它看起来像下面这些行：

 `.radio-custom:checked + .radio-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    color: $green;
    font-size: 25px;
}
`

完整的CSS

.checkbox-custom, .radio-custom {
    opacity: 0;
    position: absolute;   
}

.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.checkbox-custom-label, .radio-custom-label {
    position: relative;
}

.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    background: rebeccapurple;
    color: #fff;
    font-size: 25px;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    color: $green;
    font-size: 25px;
}

.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
  outline: 1px solid #ddd; /* focus style */
}

Answer 1

几个小时后，我发现它缺少FontAwsome字体。我在本地有它们，所以这就是为什么它只在手机上。