![](https://junpei-sugiyama.com/wp-content/uploads/2021/07/Question-1024x1024.png)
チェックボックスのデザインを画像に変更する方法ってある?
お問い合わせフォームなどにあるチェックボックスですが、デザイン通りにするにはデフォルトのデザインのままという訳にはいきません。
そこで今回はデフォルトのチェックボックスを画像に変更する方法をご紹介していきます。
ちなみにContact Form 7のチェックボックスのデザインをカスタマイズする方法は、こちらの記事を参照ください。
あわせて読みたい
-
【WordPress】Contact Form 7のチェックボックスのデザインを画像にカスタマイズする方法
続きを見る
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
チェックボックスのデザインを画像に変更する方法
最初にサンプルをご覧ください(クリック可能)
See the Pen
チェックボックスカスタマイズ by junpei (@junpei-sugiyama)
on CodePen.
1行目はデフォルトのチェックボックスで、2行目以降はチェック前と後が画像になっています。
コード解説
それではコードを見ていきます。まずはHTMLからです。
<p>
<label for="check">
<input type="checkbox" id="check">チワワ
</label>
</p>
<p>
<label class="check-box" for="check01">
<input type="checkbox" id="check01">
<span class="check-text">トイプードル</span>
</label>
</p>
<p>
<label class="check-box" for="check02">
<input type="checkbox" id="check02">
<span class="check-text">ミニチュアダックス</span>
</label>
</p>
<p>
<label class="check-box" for="check03">
<input type="checkbox" id="check03">
<span class="check-text">ゴールデンレトリバー</span>
</label>
</p>
ポイントとしては for="check01"
と id="check01"
の中身を同じにしないとチェックが効かないという点です。
次はCSSです。
.check-box {
cursor: pointer;
}
.check-text {
/* チェックボックスとテキストの上下を中央に */
align-items: center;
display: flex;
}
.check-box input {
display: none; /* デフォルトのチェックボックスを非表示 */
}
.check-box input + .check-text::before {
background-image: url("チェック入れる前のチェックボックス画像パス");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 30px;
position: relative;
width: 30px;
}
.check-box input:checked + .check-text::before {
background-image: url("チェック入れた後のチェックボックス画像パス");
}
CSSのポイント
- デフォルトのチェックボックスを非表示にする
- チェックを入れる前の画像を擬似要素で設定
- チェックを入れた後の画像を擬似要素で設定
今回使用した画像はこちらの2枚です。
![左がチェック後:右がチェック前](https://junpei-sugiyama.com/wp-content/uploads/2022/04/checkbox-customize01.jpg)
左がチェック後:右がチェック前
チェックを入れる前のデフォルトのチェックボックスを右の画像にし、チェックを入れた後の画像を左にしています。
あとは cursor: pointer;
を入れてクリック出来るというのが分かるようにしておくといいと思います。
もちろんCSSで背景色など設定する事も可能ですが、無理にCSSで書くより画像を使った方がいいかと思います。
またデザインではチェックが入っていないデザインしかない事も多いので、チェックが入ったデザインも貰うようにしましょう。
以上になります。
![](https://junpei-sugiyama.com/wp-content/uploads/2021/07/Joy-1024x1024.png)
この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!