フォームのradioとcheckboxを大きく表示する

フォームのradioとcheckboxを大きく表示したいという要望があったので、少し調べてみました。
jQueryのプラグインを使ってもよいのですが、今回はradio・checkbox周りにJavaScriptで色々と処理を行っていたので、CSSのみで実装できる方法を試してみます。

サンプルコード

CSS3のtransformを使って拡大する方法です。

HTML

<form action="">
	<dl>
		<dt>ラジオ</dt>
		<dd>
			<label for="radio1">
				<input type="radio" name="radio" id="radio1" />ラジオ1
			</label>
			<label for="radio2">
				<input type="radio" name="radio" id="radio2" />ラジオ2
			</label>
			<label for="radio3">
				<input type="radio" name="radio" id="radio3" />ラジオ3
			</label>
		</dd>
	</dl>
	<dl>
		<dt>チェックボックス</dt>
		<dd>
			<label for="checkbox1">
				<input type="checkbox" name="checkbox" id="checkbox1" />チェックボックス1
			</label>
			<label for="checkbox2">
				<input type="checkbox" name="checkbox" id="checkbox2" />チェックボックス2
			</label>
			<label for="checkbox3">
				<input type="checkbox" name="checkbox" id="checkbox3" />チェックボックス3
			</label>
		</dd>
	</dl>
</form>

CSS

input[type="radio"],
input[type="checkbox"] {
	-ms-transform: scale(2);
	transform: scale(2);
	margin-right: 10px;
}

文字にかぶってしまうので、margin-rightで余白を調整しています。
transformを使った場合のデモページ
　

以下が各ブラウザで見た状態ですが、Firefoxだけ荒くなるので注意が必要です。

サンプルコード2

通常時とチェック時の画像を作成して、labelの背景に指定する方法です。

HTML

<form action="">
	<dl>
		<dt>ラジオ</dt>
		<dd>
			<input type="radio" name="radio" id="radio1" />
			<label for="radio1">ラジオ1</label>
			<input type="radio" name="radio" id="radio2" />
			<label for="radio2">ラジオ2</label>
			<input type="radio" name="radio" id="radio3" />
			<label for="radio3">ラジオ3</label>
		</dd>
	</dl>
	<dl>
		<dt>チェックボックス</dt>
		<dd>
			<input type="checkbox" name="checkbox" id="checkbox1" />
			<label for="checkbox1">チェックボックス1</label>
			<input type="checkbox" name="checkbox" id="checkbox2" />
			<label for="checkbox2">チェックボックス2</label>
			<input type="checkbox" name="checkbox" id="checkbox3" />
			<label for="checkbox3">チェックボックス3</label>
		</dd>
	</dl>
</form>

CSS

input[type="radio"] {
	display: none;
}
input[type="radio"] + label {
	background: url(radio_off.png) left center no-repeat;
}
input[type="radio"]:checked + label {
	background: url(radio_on.png) left center no-repeat;
}
input[type="checkbox"] {
	display: none;
}
input[type="checkbox"] + label {
	background: url(check_off.png) left center no-repeat;
}
input[type="checkbox"]:checked + label {
	background: url(check_on.png) left center no-repeat;
}

radioとcheckboxをdisplay: none;で非表示にして、隣接セレクタでlabelに背景で指定、チェック後の画像は:checkedで指定しています。
背景に指定した場合のデモページ

IE8でも対応する場合、以下の対応が必要になります。

• radioやcheckboxをdisplay: none;で非表示にするとクリックしてもチェックされなくなるので、opacityを使うかpositionで見えない位置に移動させるなどで対応する。
• :checkedはIE8で対応していないので、jQueryでclassを付与するなどで対応する。

【参考サイト】

• cssと画像のみ！フォームの選択項目を装飾する方法|マークアップブログ
• IE9未満でcheckboxをdisplay:noneにしているとlabelをclickしてもチェックされない – chulip.org