【CSS】コピペで作る！おしゃれなチェックボックスデザイン3選

Q: チェックマーク（レ点）の色や背景色は自分のサイトに合わせて変えられますか？

はい、簡単に変更可能です。 CSSコード内にあるborder-color（枠線の色）やbackground-color（チェック時の背景色）のカラーコードをお好みの色（例：#2589d0）に書き換えるだけで反映されます。

Q: スマホで見るとcheckbox（チェックボックス）が小さくて押しづらいのですが、大きくできますか？

可能です。 CSS内のwidth（幅）とheight（高さ）の数値を現在の値（例：20px）から大きめの値（例：24px や 30px）に変更することで、タップしやすいサイズに調整できます。

Q: 複数選択できないように、1つだけ選ぶ仕様にすることは可能ですか？

チェックボックス（type="checkbox"）は複数選択を前提とした仕様です。 「はい / いいえ」のように1つだけを選択させたい場合は、HTMLの属性をtype="radio"（ラジオボタン）に変更した専用のデザインをご利用ください。

Q: WordPressの「Contact Form 7」や「Snow Monkey Forms」のプラグインでも使えますか？

はい、ご利用いただけます。 ただし、プラグイン側が独自に出力するHTMLのクラス名（例：.wpcf7-list-item など）に合わせて、紹介しているCSSのセレクタを少し書き換える必要があります。

2026年2月21日2026年6月13日

ボタン型のチェックボックスのデザイン例。スタンダードと背景色ありの2つのスタイル。

いつまで無駄なデザインに時間を費やしますか？自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、おしゃれなチェックボックスデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに作ることができます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

また、チェックボックス作成にはHTMLのinputタグを利用します。

inputタグの使い方を詳しく知りたい人は「【HTML】inputタグの使い方：type種類・属性一覧とCSS装飾・JS連携」を一読ください。

labelタグの使い方を詳しく知りたい人は「【HTML】labelタグの使い方：for属性の使い方や入力フォーム部品との連携」を一読ください。

さらに、チェックボックスの作り方から理解したい人は「【HTML】チェックボックスの作り方：サイズ変更やCSSデザイン・値の取得」を一読ください。

【HTML】inputタグのtype種類一覧！属性の使い方とCSS装飾

HTMLのlabel（ラベル）タグの使い方！for属性の設定とフォーム連携

HTMLチェックボックスの作り方！CSSデザインと大きくするサイズ変更

もう無駄なレイアウトに凝るのやめたら？最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

おしゃれなフリー素材デザイン集

本サイトでは、チェックボックス以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

Code Stock

ボタン型のチェックボックス

ここでは、以下のボタン型のチェックボックスデザイン例を記載しています。

ボタン型のチェックボックスデザイン

スタンダード
背景色あり

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もボックスページでは選択式でご用意しました。

調整項目一覧

基調色
並びの向き：横, 縦
形状：四角, 角丸（円）

ご興味があれば「チェックボックス一覧ページ」を一読ください。

Code Stock

CHECK-BOX | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Button type ボタン型のチェックボックス radio1 radio2 radio3 スタンダード▼ radio1 radio2…

スタンダード

radio1 radio2 radio3

HTML｜並びの向き：横, 形状：角丸

<fieldset class="checkbox-2">
  <label>
    <input type="checkbox" name="checkbox-2" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-2"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-2"/>
    radio3
  </label>
</fieldset>

CSS｜並びの向き：横, 形状：角丸

.checkbox-2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-2 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-2 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 3px;
  content: '';
  box-sizing: border-box;
}

.checkbox-2 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-2 label::before {
  border: 2px solid #d6dde3;
  background: transparent;
}

.checkbox-2 label:has(:checked)::after {
  border: solid #2589d0;
  border-width: 0 2px 2px 0;
}

.checkbox-2 input {
  display: none;
}

radio1 radio2 radio3

HTML｜並びの向き：横, 形状：円

<fieldset class="checkbox-3">
  <label>
    <input type="checkbox" name="checkbox-3" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-3"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-3"/>
    radio3
  </label>
</fieldset>

CSS｜並びの向き：横, 形状：円

.checkbox-3 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-3 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-3 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  content: '';
  box-sizing: border-box;
}

.checkbox-3 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-3 label::before {
  border: 2px solid #d6dde3;
  background: transparent;
}

.checkbox-3 label:has(:checked)::after {
  border: solid #2589d0;
  border-width: 0 2px 2px 0;
}

.checkbox-3 input {
  display: none;
}

radio1 radio2 radio3

HTML｜並びの向き：縦, 形状：角丸

<fieldset class="checkbox-4">
  <label>
    <input type="checkbox" name="checkbox-4" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-4"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-4"/>
    radio3
  </label>
</fieldset>

CSS｜並びの向き：縦, 形状：角丸

.checkbox-4 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-4 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-4 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 3px;
  content: '';
  box-sizing: border-box;
}

.checkbox-4 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-4 label::before {
  border: 2px solid #d6dde3;
  background: transparent;
}

.checkbox-4 label:has(:checked)::after {
  border: solid #2589d0;
  border-width: 0 2px 2px 0;
}

.checkbox-4 input {
  display: none;
}

radio1 radio2 radio3

HTML｜並びの向き：縦, 形状：円

<fieldset class="checkbox-5">
  <label>
    <input type="checkbox" name="checkbox-5" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-5"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-5"/>
    radio3
  </label>
</fieldset>

CSS｜並びの向き：縦, 形状：円

.checkbox-5 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-5 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-5 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  content: '';
  box-sizing: border-box;
}

.checkbox-5 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-5 label::before {
  border: 2px solid #d6dde3;
  background: transparent;
}

.checkbox-5 label:has(:checked)::after {
  border: solid #2589d0;
  border-width: 0 2px 2px 0;
}

.checkbox-5 input {
  display: none;
}

背景色あり

radio1 radio2 radio3

HTML｜並びの向き：横, 形状：角丸

<fieldset class="checkbox-6">
  <label>
    <input type="checkbox" name="checkbox-6" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-6"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-6"/>
    radio3
  </label>
</fieldset>

CSS｜並びの向き：横, 形状：角丸

.checkbox-2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-2 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-2 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 3px;
  content: '';
  box-sizing: border-box;
}

.checkbox-2 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-2 label::before {
  border: 2px solid #d6dde3;
  background: transparent;
}

.checkbox-2 label:has(:checked)::after {
  border: solid #2589d0;
  border-width: 0 2px 2px 0;
}

.checkbox-2 input {
  display: none;
}

radio1 radio2 radio3

HTML｜並びの向き：横, 形状：円

<fieldset class="checkbox-7">
  <label>
    <input type="checkbox" name="checkbox-7" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-7"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-7"/>
    radio3
  </label>
</fieldset>

CSS｜並びの向き：横, 形状：円

.checkbox-7 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-7 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-7 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  content: '';
  box-sizing: border-box;
}

.checkbox-7 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-7 label::before {
  background-color: #e6edf3;
  border: none;
}

.checkbox-7 label:has(:checked)::before {
  background-color: #2589d0;
}

.checkbox-7 label:has(:checked)::after {
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

.checkbox-7 input {
  display: none;
}

radio1 radio2 radio3

HTML｜並びの向き：縦, 形状：角丸

<fieldset class="checkbox-8">
  <label>
    <input type="checkbox" name="checkbox-8" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-8"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-8"/>
    radio3
  </label>
</fieldset>

CSS｜並びの向き：縦, 形状：角丸

.checkbox-8 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-8 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-8 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 3px;
  content: '';
  box-sizing: border-box;
}

.checkbox-8 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-8 label::before {
  background-color: #e6edf3;
  border: none;
}

.checkbox-8 label:has(:checked)::before {
  background-color: #2589d0;
}

.checkbox-8 label:has(:checked)::after {
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

.checkbox-8 input {
  display: none;
}

radio1 radio2 radio3

HTML｜並びの向き：縦, 形状：円

<fieldset class="checkbox-9">
  <label>
    <input type="checkbox" name="checkbox-9" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-9"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-9"/>
    radio3
  </label>
</fieldset>

CSS｜並びの向き：縦, 形状：円

.checkbox-9 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  border: none;
}

.checkbox-9 label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  min-height: 20px;
}

.checkbox-9 label::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  content: '';
  box-sizing: border-box;
}

.checkbox-9 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 6px;
  height: 10px;
  content: '';
  box-sizing: border-box;
}

.checkbox-9 label::before {
  background-color: #e6edf3;
  border: none;
}

.checkbox-9 label:has(:checked)::before {
  background-color: #2589d0;
}

.checkbox-9 label:has(:checked)::after {
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

.checkbox-9 input {
  display: none;
}

リスト型のチェックボックス

ここでは、以下のリスト型のチェックボックスデザイン例を記載しています。

リスト型のチェックボックスデザイン

枠線＆背景色

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もボックスページでは選択式でご用意しました。

調整項目一覧

基調色
形状：四角, 角丸（円）

ご興味があれば「チェックボックス一覧ページ」を一読ください。

Code Stock

枠線＆背景色

radio1 radio2 radio3

HTML｜形状：四角

<fieldset class="checkbox-10">
  <label>
    <input type="checkbox" name="checkbox-10" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-10"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-10"/>
    radio3
  </label>
</fieldset>

CSS｜形状：四角

.checkbox-10 {
  border: none;
}

.checkbox-10 label {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 200px;
  margin-bottom: .4em;
  padding: .5em .7em .5em 32px;
  border: 1px solid #2589d0;
  border-radius: 3px;
  background-color: #2589d026;
  cursor: pointer;
}

.checkbox-10 label:has(:checked) {
  background-color: #2589d0;
  color: #fff;
}

.checkbox-10 label::before {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 1px;
  background-color: #fff;
  content: '';
  box-sizing: border-box;
}

.checkbox-10 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 17px;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 4px;
  height: 8px;
  border: solid #2589d0;
  border-width: 0 2px 2px 0;
  content: '';
  box-sizing: border-box;
}

.checkbox-10 input {
  display: none;
}

radio1 radio2 radio3

HTML｜形状：角丸

<fieldset class="checkbox-11">
  <label>
    <input type="checkbox" name="checkbox-11" checked/>
    radio1
  </label>
  <label>
    <input type="checkbox" name="checkbox-11"/>
    radio2
  </label>
  <label>
    <input type="checkbox" name="checkbox-11"/>
    radio3
  </label>
</fieldset>

CSS｜形状：角丸

.checkbox-11 {
  border: none;
}

.checkbox-11 label {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 200px;
  margin-bottom: .4em;
  padding: .5em .7em .5em 32px;
  border: 1px solid #2589d0;
  border-radius: 30px;
  background-color: #2589d026;
  cursor: pointer;
}

.checkbox-11 label:has(:checked) {
  background-color: #2589d0;
  color: #fff;
}

.checkbox-11 label::before {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #fff;
  content: '';
  box-sizing: border-box;
}

.checkbox-11 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 17px;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 4px;
  height: 8px;
  border: solid #2589d0;
  border-width: 0 2px 2px 0;
  content: '';
  box-sizing: border-box;
}

.checkbox-11 input {
  display: none;
}