I have a form with CSS-styled and radio buttons that simulate a tabbed-structure. Only the s are visible and should be click-able.
It looks something like: [Economy|Business|First]
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; }
So the user essentially sees the labels and taps to check the 'invisible' radio button. Since there is a for= of each , the radio button should be checked.
This works for me on the desktop Chrome browser, as well as desktop Safari and mobile Safari on the iPhone and iPad.
However it is not working on any of the Android devices that I'm testing.
