スマホ(Android,iphone)でタップしやすいラジオボタン【CSS】デフォルトのラジオボタンはタップしづらく、スマートフォンユーザーの操作性を大きく損なう可能性があります。 labelタグを使用しても、タップ範囲はボタンと文字列だけなので、ユーザビリティが大きく改善するのか、といわれると微妙と言わざるを得ません。 JavaScriptを使用せず、CSSだけでスマートフォンからもタップしやすいボタンの実装方法を忘備録も兼ねて書いていきたいと思います。 レスポンシブにも対応しています。 完成したタップ領域の広いラジオボタン ラジオボタンの完成系(デモ)は下記になります。かなりシンプルにCSSを作っているため、軽量で拡張性が高いと思います。 お好きにカスタマイズしてみてください:) ラジオボタンを透明に 順を追って解説していますが、手っ取り早くスタイルシートをコピペで使いたい人は 完成までジャンプして下さい。 ラジオボタンを透明に チェックされたラベルの色を変更
