CSSのみ（スクリプトなし）でフォームのラジオボタン、チェックボックスを画像で装飾する方法

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" /><span class="image"></span>ラジオボタン2</label>
<label><input type="radio" name="radio" /><span class="image"></span>ラジオボタン3</label>
<label><input type="checkbox" /><span class="image"></span>チェックボックス1</label>
<label><input type="checkbox" /><span class="image"></span>チェックボックス2</label>
<label><input type="checkbox" /><span class="image"></span>チェックボックス3</label>

ソースは説明のため簡素化してありますが、画像を配置するための空要素「span class=”image”」をinputタグに隣接して用意しておきます。
本来、疑似要素「:after」を使いたいところですが、inputにbefore、afterは使えないようです。

次にスタイルです。

label{ 
	position: relative;
	padding: 0 0 0 7px;
}
label input{ 
	opacity: 0;
}
label .image{ 
	position: absolute;
	left: 0;
	top: 8px;
	display: block;
	background: url("/image/checkbox-radio-image.gif") no-repeat 0 0;
	width: 15px;
	height: 15px;
}
label input:checked + .image{
	background-position: 0 -15px;
}

input要素は「opacity: 0;」で隠します。
先ほど用意した空要素をブロック要素にして、背景画像として先ほどの画像を指定し、それに応じた縦横幅を指定します。
さらに絶対配置「position: absolute;」で画像の位置を調整します。こちらは各々サイトのフォントサイズや行間などによって異なるため、ピクセル単位で微調整します。
最後に「input:checked + .image」として、input要素の隣接要素にチェックが入った状態の画像を指定します。

以上、上記のソースを実際に表示させると以下のようになります。

実際のラジオボタン、チェックボックスは隠れていますが、きちんと機能しているので、フォームの送信も問題ありません。

外部のプラグインなどを使うと、アイコン画像の位置がズレたり、クリックできなかったりと、トラブルの原因になることもあります。
一方で、この方法では、JavaScriptなどを使用していないため軽量で、なおかつ、自身で画像デザインや細かいズレを簡単に調整できるので、自由度が高く実装コストを抑えられます。