Android Chrome：HTML <label> 不检查 <input>

Question

我有一个带有 CSS 样式的表单和模拟选项卡式结构的单选按钮。只有 s 是可见的并且应该是可点击的。

它看起来像： [经济|商业|第一]

HTML：

<span id="containerEconomy" class="radio-wrap three"><input name="fltCabin" type="radio" id="rdoEconomy" class="custom-radio" checked=""><label for="rdoEconomy" onclick="">economy</label></span>
<span id="containerBusiness" class="radio-wrap three"><input name="fltCabin" type="radio" id="rdoBusiness" class="custom-radio"><label for="rdoBusiness" onclick="">business</label></span>
<span id="containerFirst" class="radio-wrap three"><input name="fltCabin" type="radio" id="rdoFirst" class="custom-radio"><label for="rdoFirst" onclick="">first</label></span>

CSS：

形式 .radio-wrap { 位置：相对；向左飘浮;显示：块；高度：4rem；框尺寸：边框框； } 形成 .radio-wrap.three { 宽度：33.3% } 表单输入[type="radio"].custom-radio { position:absolute;剪辑：矩形（0,0,0,0）； } 表单 input.custom-radio ~ label { position:absolute;顶部：0；对：0；底部：0；左：0；显示：内联块；背景图像：-webkit-渐变（线性，左上，左下，从（#ededed），到（#fff））；边框：.1rem 实心#ccc；右边框：无；行高：3.4rem；颜色：#7f7f7f;文本对齐：居中；光标：指针； } form .radio-wrap:last-child input.custom-radio ~ label {border-right:.1rem solid #ccc; } 表单 input.custom-radio:checked ~ label { background-image:none;背景颜色：#fff;颜色：#000; } form.cball fieldset.tab input.custom-radio:checked ~ label {border-top:none; }

因此，用户基本上可以看到标签并点击以检查“不可见”单选按钮。由于 each 有一个 for=，所以应该选中单选按钮。

这适用于桌面 Chrome 浏览器，以及 iPhone 和 iPad 上的桌面 Safari 和移动 Safari。

但它不适用于我正在测试的任何 Android 设备。

Answer 1

尝试从标签中删除边框。它帮助了我。