我有一个带有 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 设备。