スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。 JavaScriptなどのプラグインを使用せず、CSSのみでフォームのラジオボタンやチェックボックスを画像で装飾する方法です。 さまざまな方法があると思いますが、1つの方法としてご参考いただければと思います。 まず、例えば以下のような未選択状態と選択状態のものを並べた装飾画像を1つ用意します。 今回は横幅15px、縦幅15pxの画像を縦に並べたもので装飾してみます。 次にHTMLの用意です。 <label><input type="radio" name="radio" /><span class="image"></span>ラジオボタン1</label> <label><input type="radio" name="radio"