【PR】を含みます。

Webデザイン

【CSS】チェックボックスのデザインをカスタマイズする方法

CSS チェックボックスのデザインをカスタマイズする方法

この記事では、CSSでチェックボックスのデザインをカスタマイズする方法を解説します。

inputタグ(チェックボックス)に疑似用を使用せずに、デザインをカスタマイズする方法を解説しています。

チェックボックスはブラウザによって見た目が異なり、デフォルトのままだとサイトのデザインに合わない場合があります。

CSSを使って自由にデザインをカスタマイズすることで、より統一感のあるUIを実現することができます。

ラジオボタンのデザインをカスタマイズする方法は以下記事解説してます。

あわせて読む
CSS ラジオボタンのデザインをカスタマイズする方法
【CSS】ラジオボタンのデザインをカスタマイズする方法

もくじラジオボタンのデザインをカスタマイズする方法サンプル実装コードコード解説ラジオボタン選択時の円の色を変更する方法サンプル実装コードラジオボタンにホバーアニメーションを実装サンプル実装コード CS ...

チェックボックスのデザインをカスタマイズする方法

サンプル

実装コード

HTML
Copy
<label class="checkbox_container">
  <input class="checkbox" type="checkbox">
  チェックボックス
</label>
CSS
Copy
.checkbox_container {
  display: inline-block;
  cursor: pointer;
}
/* チェック前のデザイン */
.checkbox {
  appearance: none; /* デフォルトスタイルを削除 */
  -webkit-appearance: none; /* Safari and Chrome */
  -moz-appearance: none; /* Firefox */
  margin: 0;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  border-color: #c6c6c6;
  background-color: #fff;
  position: relative;
  top: -2px;
}
/* チェック後のデザイン */
.checkbox:checked {
  border-color: #f09896;
  background-color: #f09896;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
}

コード解説

チェック前のデザイン

appearance: none;
チェックボックスのデフォルトスタイルを削除します。
これにより、カスタムスタイルが適用可能になります。
margin: 0;
チェックボックスの余白をリセットします。
margin-right: 3px;
チェックボックスの右側に3pxの余白を追加します。
width: 15px;
チェックボックスの幅を指定します。
height: 15px;
チェックボックスの高さを指定します。
vertical-align: middle;
チェックボックスを縦方向に中央揃えします。
border-radius: 3px;
角を丸くします。
border-width: 1px;
ボーダーの幅を指定します。
border-style: solid;
ボーダーのスタイルを指定します。
border-color: #c6c6c6;
ボーダーの色を指定します。
background-color: #fff;
背景色を設定します。
position: relative;
top: -2px;
チェックボックスの位置を微調整します。

チェック後のデザイン

.checkbox:checked
チェックボックスがチェックされた状態のスタイルを指定できます。
border-color: #f09896;
チェックされたときのボーダーの色を指定します。
background-color: #f09896;
チェックされたときの背景色を指定します。
background-image
SVG形式のチェックマーク画像をデータURIとして埋め込んでいます。
これにより、外部画像を使用せずにチェックマークを表示できます。
SVGを使用しているため高解像度でも綺麗な表示が可能です。
background-size: 100% auto;
背景画像のサイズを指定します。
幅を100%に設定し、高さは自動調整しています。
background-repeat: no-repeat;
背景画像を繰り返さないようにします。
background-position: center;
背景画像を中央に配置します。

チェック時のチェックマークの色だけを変更する（背景は白のまま）

サンプル

実装コード

矢印の色は、SVG形式のチェックマーク画像（background-image）のstroke="%23f09896"で指定しています。

stroke="%23f09896"の%23は # 記号に対応し、f09896が16進数カラーコードです。

HTML
Copy
<label class="checkbox_container">
  <input class="checkbox2" type="checkbox">
  チェックボックス
</label>
CSS
Copy
.checkbox_container {
  display: inline-block;
  cursor: pointer;
}
/* チェック前のデザイン */
.checkbox2 {
  appearance: none; /* デフォルトスタイルを削除 */
  -webkit-appearance: none; /* Safari and Chrome */
  -moz-appearance: none; /* Firefox */
  margin: 0;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  border-color: #f09896;
  background-color: #fff;
  position: relative;
  top: -2px;
}
/* チェック後のデザイン */
.checkbox2:checked {
  background-color: #fff;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f09896" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
}

チェックボックスから矢印をはみ出させる

サンプル

実装コード

HTML
Copy
<label class="checkbox_container">
  <input class="checkbox3" type="checkbox">
  <span class="checkmark"></span>
  チェックボックス
</label>
CSS
Copy
.checkbox_container {
  display: inline-block;
  cursor: pointer;
}
.checkbox3 {
  margin: 0;
  width: 0;
  height: 0;
  opacity: 0;
}
/* チェック前のデザイン */
.checkmark {
  display: inline-block;
  height: 15px;
  width: 15px;
  margin-right: 3px;
  background-color: #fff;
  border: 1px solid #f09896;
  border-radius: 3px;
  position: relative;
  top: 2px;
}
/* チェック後のデザイン */
.checkbox3:checked + .checkmark::after {
  content: '';
  display: inline-block;
  width: 220%;
  height: 220%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f09896" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

まとめ

今回は、CSSを使ってチェックボックスの見た目を自由にカスタマイズする方法を紹介しました。

  • 基本のデザインカスタマイズ方法
  • チェック時のスタイル変更
  • SVGで矢印の色を変更する方法
  • チェックマークを枠からはみ出させる表現

チェックボックスのスタイルは工夫次第でデザイン性の高いUIにすることができます。

ぜひ自分のサイトに取り入れてみてください！

ラジオボタンのデザインをカスタマイズする方法は以下記事解説してます。

あわせて読む
CSS ラジオボタンのデザインをカスタマイズする方法
【CSS】ラジオボタンのデザインをカスタマイズする方法

もくじラジオボタンのデザインをカスタマイズする方法サンプル実装コードコード解説ラジオボタン選択時の円の色を変更する方法サンプル実装コードラジオボタンにホバーアニメーションを実装サンプル実装コード CS ...

-Webデザイン
-