タブ構造をシミュレートする CSS スタイルのラジオ ボタンを含むフォームがあります。のみが表示され、クリック可能にする必要があります。
それは次のようなものです: [経済|ビジネス|ファースト]
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 { 位置:相対; フロート:左; 表示ブロック; 高さ:4レム; ボックスサイズ:ボーダーボックス; }
form .radio-wrap.three { width:33.3% }
form input[type="radio"].custom-radio { 位置:絶対; クリップ:rect(0,0,0,0); }
form input.custom-radio ~ label { position:absolute; 上:0; 右：0; 下:0; 左：0; 表示:インラインブロック; background-image:-webkit-gradient(linear,left top,left bottom,from(#ededed),to(#fff)); border:.1rem solid #ccc; ボーダー右: なし; 行の高さ:3.4rem; 色:#7f7f7f; テキスト揃え:中央; カーソル:ポインタ; }
form .radio-wrap:last-child input.custom-radio ~ label { border-right:.1rem solid #ccc; }
form input.custom-radio:checked ~ label { background-image:none; 背景色:#fff; 色:#000; }
form.cball fieldset.tab input.custom-radio:checked ~ label { border-top:none; }
したがって、ユーザーは基本的にラベルを見て、タップして「見えない」ラジオボタンをチェックします。それぞれの for= があるので、ラジオボタンをチェックする必要があります。
これは、デスクトップの Chrome ブラウザだけでなく、デスクトップの Safari や iPhone と iPad のモバイル Safari でも機能します。
ただし、テストしている Android デバイスでは動作しません。