gpt4 book ai didi

html 标签 radio 适用于桌面和模拟器,但不适用于 iOS Safari

转载 作者:行者123 更新时间:2023-11-28 04:11:32 25 4
gpt4 key购买 nike

我很难调试它,但基本上我有一堆复选框,它们看起来都像以下示例:

<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>

更新:

我删除了实际单选按钮上的不透明度并且可以看到它正在工作,虽然 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 */
}

最佳答案

经过几个小时的废话,我发现它缺少 FontAwesome 字体。我在本地有它们,所以这就是为什么它只在移动设备上。

关于html 标签 radio 适用于桌面和模拟器,但不适用于 iOS Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42680660/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com