先日とあるサイトをコーディングしたのですが、その中の「お問い合わせフォーム」では、「オリジナル画像のチェックボックス」を実装する必要がありました。
この変更自体は非常に簡単なのですが、いつもコピペソースを使い「具体的にどういう仕組みなのか」を理解していなかった為、その勉強も兼ねて当記事を書きます。

というわけで今回は、「お問い合わせフォームのチェックボックスをオリジナル画像にする（意外と簡単）」の紹介です。
IE11対応なので、安心して使えます。

実際のソース

上記のチェックボックスは、実際に弊社webサイトのお問い合わせフォームで使用しているデザインです。

一つ目の「通常のチェックボックス」にはブラウザ標準のボックスが表示されていますが、それ以外の項目は、ちょっとリッチなボックスに変わっていますね。

ひとまず、上記の「HTML」と「CSS」をコピペして使えばオリジナル画像のチェックボックスが表示されるはずです。

コツ「background-image」を2枚使う

意外と知られていませんが、cssの「background-image」は、一つの要素に複数枚の画像を追加できます。

▼１枚のみの場合

.hoge {
  background-image: url("画像1パス");
  background-position: 0 0;
}

▼３枚の場合

.hoge {
  background-image: url("画像1パス"), url("画像2パス"), url("画像3パス");
  background-position: 0 0, 0 0, 0 0;
}

上記参考コードの通りなのですが、background-imageは、「カンマ（,）」で区切ることで背景イメージを複数枚追加できます。
同様に、「background-position」や「background-size」等も、カンマで区切ることでそれぞれの画像に対してのスタイルを設定できます。

「画像の重なり順」は、後ろになるにつれ下側になります。

つまり、

 background-image: url("画像1"), url("画像2"), url("画像3");

の書き方だと、「画像3」が一番下になり、その上に「画像2」「画像1」が乗っていく感じです。

では本テクニックを使用する場合ですが、
・ボックスの画像
・チェック（レ点）の画像
を用意し、「before要素」の背景画像として追加します。

上記画像を作成したら、その画像パスを以下の「ここに～の画像」に書き込めば、良い感じに表示されると思います。
※画像のサイズや縦横比は別途調整が必要です。

.check-box input + .text:before {
  content: "";
  display: inline-block;
  position: relative;
  top: 0.25em;
  margin: 0 5px 0 0;
  background-image: none, url("ここに「ボックスの画像」");
  background-size: 68% auto, 100%;
  background-position: top 55% left 50%, 0 0;
  background-repeat: no-repeat, no-repeat;
  width: 19px;
  height: 18px;
}

.check-box input:checked + .text:before {
  background-image: url("ここに「チェック（レ点）の画像」"), url("ここに「ボックスの画像」");
}

以上が「チェックボックスをオリジナル画像にするテクニック」です。
次項より、簡単な解説をします。

重要：input要素の装飾は、原則として変更できない

<input type="checkbox">

と書けば通常のチェックボックスが出現しますが、これを変更する為のcssは、現状用意されていません。
だからこのinput要素は、一旦「display: none;」で見えなくします。

その下準備の後、inputタグの兄弟要素である

<span class="text">たけのこの里</span>

に、css側でチェックボックスをbeforeとして追加します。

こうやって見ると結構ややこしいことをしていますが、
・兄弟要素のスタイル指定方法（cssにおける「+」の使い方）
・背景画像の複数枚設置方法
を理解してしまえば、結構簡単です。

また、今回のテクニックの弱点は「アニメーションが効かない」ことですね。
「背景画像の表示/非表示」は「transition」が効かないので、「チェックマークをフェードで追加したい！」等の場合は、別の策を考える必要があります。

まとめ

以上、「チェックボックスをオリジナル画像にする方法」でした。

エンジニア界隈では、「チェックボックスを変更すると、ユーザーの混乱を招くのであまりやらない方が良い」と言われたりします。
だから今回のように、もしオリジナル画像を取り入れるとしても、「明らかにチェックボックスである」と分かるようにしましょう。