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：

 
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

嘗試從標籤中刪除邊框。它幫助了我。