[素材有]CSS+画像で作るスマートフォン向けラジオボタン＆チェックボックスこんにちは、霙(@xxmiz0rexx)です。 漂う今更感の中、スマートフォンでタップしやすい形のラジオボタンとチェックボックスを作る機会があったのでメモとして残しておきます。 ON/OFFの画像も作ったので、もし使いたい人がいたらご自由にダウンロードしてくださいませ :) 今回目指したのはこんなイメージ。 デフォルトのチェックボックス＆ラジオボタンを使ってみた結果、タップ範囲が狭く選択しづらかったので iOSアプリのように押しやすいUIにしたいと思い、CSS＆画像で作ってみました。 これなら横一列がタップ範囲なので不器用なわたしでも押し間違いをしたり「何これ押せない…！」なんてことが発生しにくく、非常に快適に使うことが出来ました♪ html <form id="infoForm"> <fieldset> <legend>Pray for rain</legend> <ul class="
![[素材有]CSS+画像で作るスマートフォン向けラジオボタン＆チェックボックス](https://cdn-ak-scissors.b.st-hatena.com/image/square/4114ba944fbc4ad7dce3f5e3929f4d782427892b/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2Fe7be25fbc0824211d3f10797e07eeb33.png)
