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：

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设备上运行。

Answer 1

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

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

1 个答案: