我有一个带有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：
form .radio-wrap { position:relative; float:left; display:block; height:4rem; box-sizing:border-box; }
form .radio-wrap.three { width:33.3% }
form input[type="radio"].custom-radio { position:absolute; clip:rect(0,0,0,0); }
form input.custom-radio ~ label { position:absolute; top:0; right:0; bottom:0; left:0; display:inline-block; background-image:-webkit-gradient(linear,left top,left bottom,from(#ededed),to(#fff)); border:.1rem solid #ccc; border-right:none; line-height:3.4rem; color:#7f7f7f; text-align:center; cursor:pointer; }
form .radio-wrap:last-child input.custom-radio ~ label { border-right:.1rem solid #ccc; }
form input.custom-radio:checked ~ label { background-image:none; background-color:#fff; color:#000; }
form.cball fieldset.tab input.custom-radio:checked ~ label { border-top:none; }
因此，用户基本上看到标签和点击以检查“隐形”单选按钮 . 由于每个都有一个for =，因此应该检查单选按钮 .
这适用于桌面Chrome浏览器，以及iPhone和iPad上的桌面Safari和移动Safari .
但是它不适用于我正在测试的任何Android设备 .
1 回答
尝试从标签中删除边框 . 它帮助了我 .