【PR】を含みます。

Webデザイン

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

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

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

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

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

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

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

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

【CSS】ラジオボタンのデザインをカスタマイズする方法

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

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

サンプル

実装コード

Copyをクリックするとコピーできます。

HTML
Copy
<label class="checkbox-container">
  <input class="checkbox" type="checkbox">
  チェックボックス
</label>
CSS
Copy
.checkbox-container {
  display: inline-block;
  cursor: pointer;
}
/* チェック前のデザイン */
.checkbox {
  position: relative;
  top: -2px;
  width: 15px;
  height: 15px;
  margin: 0 3px 0 0;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #c6c6c6;
  border-radius: 3px;
  -webkit-appearance: none; /* Safari and Chrome */
  -moz-appearance: none; /* Firefox */
  appearance: none; /* デフォルトスタイルを削除 */
}
/* チェック後のデザイン */
.checkbox:checked {
  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-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  border-color: #f09896;
}

コード解説

チェック前のデザイン

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

チェック後のデザイン

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

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

サンプル

実装コード

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

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

Copyをクリックするとコピーできます。

HTML
Copy
<label class="checkbox-container">
  <input class="checkbox2" type="checkbox">
  チェックボックス
</label>
CSS
Copy
.checkbox-container {
  display: inline-block;
  cursor: pointer;
}
/* チェック前のデザイン */
.checkbox2 {
  position: relative;
  top: -2px;
  width: 15px;
  height: 15px;
  margin: 0 3px 0 0;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #f09896;
  border-radius: 3px;
  -webkit-appearance: none; /* Safari and Chrome */
  -moz-appearance: none; /* Firefox */
  appearance: none; /* デフォルトスタイルを削除 */
}
/* チェック後のデザイン */
.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-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

チェックボックスからチェックマークをはみ出させる

サンプル

実装コード

Copyをクリックするとコピーできます。

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 {
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
}
/* チェック前のデザイン */
.checkmark {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  top: 2px;
  width: 15px;
  height: 15px;
  margin-right: 3px;
  background-color: #fff;
  border: 1px solid #f09896;
  border-radius: 3px;
}
/* チェック後のデザイン */
.checkbox3:checked + .checkmark::after {
  display: inline-block;
  position: absolute;
  top: 30%;
  left: 50%;
  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-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  content: "";
}

まとめ

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

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

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

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

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

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

【CSS】ラジオボタンのデザインをカスタマイズする方法

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

-Webデザイン
-