checkboxの表示をCSSのみで画像に置き換える

基本的にデフォルトで使用されるチェックボックスの表示。見慣れているせいなのか違和感はないのですが、デフォルト状態では小さいため分かりにくかったり、サイトのデザインによっては、デフォルト状態ではサイトの世界観に合わない表示になることがどうしてもあります。

チェックボックスの表示の部分を妥協せず、画像に置き換えて表示変更をさせ、サイトにあったデザインに変更させてしまいましょう。

自分が実際に用いたのはCSSのみでcheckboxの表示を画像に置き換えた方法です。
その他にも、jqueryを用いて表示の変更をする方法もあります。(※jqueryを用いた表示変更は参考リンクに載せておきます。)

サンプルページを表示

<form>
<ul class="bg_checkbox">
<li><input type="checkbox" checked><label>和食</label></li>
<li><input type="checkbox"><label>洋食</label></li>
<li><input type="checkbox"><label>中華</label></li>
<li><input type="checkbox"><label>イタリアン</label></li>
</ul>
</form>

.bg_checkbox li {
	position: relative;
	display: inline-block;
	margin: 0 32px 0 0;
	padding: 0;
}

.bg_checkbox input {
	position: absolute;
	top: 0;
	opacity: 0;
	width: 100%;  
	height: 100%;
}

.bg_checkbox input[type="checkbox"] + label {
	display: block;
	background-image: url(../image/bg_checkbox_off.png);
	background-size: 24px;
	background-position: left center;
	background-repeat: no-repeat;
	padding: 4px 0 0 28px;
}

.bg_checkbox input[type="checkbox"]:checked + label {
	background-image: url(../image/bg_checkbox_on.png);
}

htmlは難しいことをしていませんが、気をつける箇所としては、通常はlabelを使いinputを挟みますが、この方法ではinputの後にlabelを使い、labelでテキストを挟みます。

あとはCSS側で、いろいろと調整をしていきます。

通常のチェックボックスになるinput type=checkboxはopacityを使い透過させます。
透過させた後に、本来チェックボックスが表示される場所にlabelを使って、画像を用いてチェックボックスを表示させます。画像はbackgroundを使い背景として表示します。
チェックが入ったら画像を変更しないといけないので、input[type=”checkbox”]:checkedになったら背景をチェック画像に切り替えます。

今回はチェックボックスのみの表示変更の方法を書きましたが、ラジオボタンでも同じことは可能です。

サイトのデザインや世界観の統一のためにも、チェックボックスの表示やラジオボタンの表示は調整対象になるところでもあるので、覚えておいて損はない技術だと思います。
スマホサイトの場合ではユーザの操作感にも関わってくるので、表示を大きくできるという意味でも、ぜひ導入していきたいところですね。