【簡単】checkbox（チェックボックス）のデザインをカスタマイズする方法【CSS】
ブラウザによってチェックボックス（以降checkbox）の見た目が変わる。
共通のデザインになるようカスタマイズしたい。
この様な悩みを解決します。
本記事ではCSSを使って、独自デザインのcheckboxを作成する方法について解説します。
checkboxをリセットする
input[type="checkbox"] {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
まず最初にcheckboxのデフォルトデザインを無効にします。
上記CSSを当てることで、リセットされます。
チェックボックス用HTMLを用意
<input id="checkbox" class="checkbox" type="checkbox">
<label for="checkbox">同意する</label>
チェックボックス用のHTMLです。
本記事では上記コードを使ってCSSでデザインしていきます。
チェックボックスデザイン サンプル
See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0
チェックボックスデザインサンプルです。
一般的なチェックボックスの仕様をリセットされた状態から独自のCSSで作ってます。
四角いボックスの中にチェックマークが付く一般的なデザインです。
導入方法は以下の通りです。
チェックボックス用独自デザインCSS
/* チェックボックスデザイン */
input[type="checkbox"] {
cursor: pointer;
padding-left: 30px;/*label手前にチェックボックス用の余白を開ける*/
vertical-align: middle;
position: relative;
}
input[type="checkbox"]::before,
input[type="checkbox"]::after {
content: "";
display: block;
position: absolute;
}
input[type="checkbox"]::before {
background-color: #fff;
border-radius: 0%;
border: 1px solid #666464;
width: 20px;/*チェックボックスの横幅*/
height: 20px;/*チェックボックスの縦幅*/
transform: translateY(-50%);
top: 50%;
left: 5px;
}
input[type="checkbox"]::after {
border-bottom: 3px solid #666464;/*チェックの太さ*/
border-left: 3px solid #666464;/*チェックの太さ*/
opacity: 0;/*チェック前は非表示*/
height: 6px;/*チェックの高さ*/
width: 11px;/*チェックの横幅*/
transform: rotate(-45deg);
top: -7px;/*チェック時の位置調整*/
left: 10px;/*チェック時の位置調整*/
}
input[type="checkbox"]:checked::after {
opacity: 1;/*チェック後表示*/
}
先ほどのチェックボックスサンプルで使ってるCSSになります。
チェックボックスを作るのに擬似要素のbefore要素・after要素を採用してます。
before要素にborder・width・heightを当てボックスを作ります。
after要素でborder・transformを使い、チェックマークを作ります。
それぞれwidth・height・borderの太さを任意の値に設定し、チェックマークの位置・形状を調整します。
opacityを使ってチェック前・チェック後に透過率を設定し、表示・非表示を設定します。
それぞれのセレクタに当ててるpositiion（top・leftなど）の値は自身の環境に設置後、微調整してください。
それぞれの環境によりベースのCSSが違うのでチェックボックスの位置に誤差が生じます。
以上で独自デザインで簡単なチェックボックスの完成です。
まとめ
お問い合わせフォームなどでチェックボックスを扱うサイトが多々あるかと思います。
本記事を参考に独自のデザインを当ててみましょう。
以上で解説を終わります。
