【コピペOK】CSSだけで作るおしゃれなチェックボックス8選

はじめに

「デフォルトのチェックボックスのデザインがサイトに合わない」と感じていませんか？

フォームのデザインにこだわりたいけど、JavaScriptを使わずにシンプルに実装したいという方も多いのではないでしょうか。

今回は、コピペするだけですぐに使えるおしゃれなチェックボックスのデザインを8個ご紹介します。

すべてCSSだけで実装されており、レスポンシブ対応とアクセシビリティにも配慮しています。

この記事を読み終える頃には、プロジェクトにぴったりのチェックボックスデザインが見つかり、すぐに実装できるようになりますので、ぜひ最後まで読んでみてください。

1. シンプルな角丸チェックボックス

See the Pen 1. シンプルな角丸チェックボックス by ryoma (@hwjgdjpk-the-decoder) on CodePen.

特徴

• 角丸でやわらかい印象
• シンプルで使いやすいデザイン
• どんなサイトにも合わせやすい

HTML

<div class="demo-container">
  <label class="checkbox-wrapper">
    <input type="checkbox" class="checkbox-input">
    <span class="checkbox-tile">
      <span class="checkbox-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
      </span>
      <span class="checkbox-label">利用規約に同意する</span>
    </span>
  </label>
</div>

CSS

/* デモ用のコンテナ - 中央配置 */
.demo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 20px 0;
}

/* ラッパーのスタイル */
.checkbox-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

/* デフォルトのチェックボックスを非表示 */
.checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* カスタムチェックボックスのコンテナ */
.checkbox-tile {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* チェックボックスの外枠 */
.checkbox-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  transition: all 0.2s ease;
}

/* チェックマークのSVG */
.checkbox-icon svg {
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s ease;
}

/* チェック時のスタイル */
.checkbox-input:checked ~ .checkbox-tile .checkbox-icon {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.checkbox-input:checked ~ .checkbox-tile .checkbox-icon svg {
  opacity: 1;
  transform: scale(1);
  color: white;
}

/* ホバー時のスタイル */
.checkbox-wrapper:hover .checkbox-icon {
  border-color: #3b82f6;
}

/* フォーカス時のスタイル */
.checkbox-input:focus ~ .checkbox-tile .checkbox-icon {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

2. スイッチ型トグル

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

特徴

• iOS風のモダンなトグルスイッチ
• スムーズなスライドアニメーション
• ON/OFFが視覚的に分かりやすい

HTML

<div class="demo-container">
  <label class="switch-wrapper">
    <input type="checkbox" class="switch-input">
    <span class="switch-slider"></span>
    <span class="switch-label">通知を受け取る</span>
  </label>
</div>

CSS

/* デモ用のコンテナ - 中央配置 */
.demo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 20px 0;
}

/* スイッチのラッパー */
.switch-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

/* デフォルトのチェックボックスを非表示 */
.switch-input {
  display: none;
}

/* スイッチの外枠 */
.switch-slider {
  position: relative;
  width: 48px;
  height: 26px;
  background-color: #cbd5e1;
  border-radius: 34px;
  transition: background-color 0.3s;
}

/* スイッチのつまみ */
.switch-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* チェック時のスタイル */
.switch-input:checked + .switch-slider {
  background-color: #10b981;
}

.switch-input:checked + .switch-slider::before {
  transform: translateX(22px);
}

/* ホバー時のスタイル */
.switch-wrapper:hover .switch-slider {
  opacity: 0.8;
}

/* ラベルのスタイル */
.switch-label {
  font-size: 16px;
  color: #374151;
}

3. グラデーションチェックボックス

See the Pen 3. グラデーションチェックボックス by ryoma (@hwjgdjpk-the-decoder) on CodePen.

特徴

• グラデーションで目を引くデザイン
• チェック時にアニメーション効果
• モダンでカラフルな印象

HTML

<div class="demo-container">
  <label class="gradient-checkbox">
    <input type="checkbox" class="gradient-input">
    <span class="gradient-box">
      <svg viewBox="0 0 12 10" class="gradient-check">
        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
      </svg>
    </span>
    <span class="gradient-label">新着情報を受け取る</span>
  </label>
</div>

CSS

/* デモ用のコンテナ - 中央配置 */
.demo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 20px 0;
}

/* ラベルのスタイル */
.gradient-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 16px;
}

/* デフォルトチェックボックスを非表示 */
.gradient-input {
  display: none;
}

/* カスタムボックス */
.gradient-box {
  position: relative;
  width: 22px;
  height: 22px;
  border: 2px solid #e5e7eb;
  border-radius: 4px;
  transition: all 0.3s ease;
  background: white;
}

/* チェックマーク */
.gradient-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: all 0.3s ease;
}

.gradient-check polyline {
  fill: none;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: stroke-dashoffset 0.3s ease;
}

/* チェック時のスタイル */
.gradient-input:checked ~ .gradient-box {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
  transform: scale(1.05);
}

.gradient-input:checked ~ .gradient-box .gradient-check {
  opacity: 1;
}

.gradient-input:checked ~ .gradient-box .gradient-check polyline {
  stroke-dashoffset: 0;
}

/* ホバー時のスタイル */
.gradient-checkbox:hover .gradient-box {
  border-color: #667eea;
  transform: scale(1.1);
}

/* ラベルのスタイル */
.gradient-label {
  color: #4b5563;
  transition: color 0.3s ease;
}

.gradient-input:checked ~ .gradient-label {
  color: #667eea;
}

4. ネオモーフィズムチェックボックス

See the Pen 4. ネオモーフィズムチェックボックス by ryoma (@hwjgdjpk-the-decoder) on CodePen.

特徴

• 立体的で柔らかい印象
• 押し込まれるようなアニメーション
• トレンドのネオモーフィズムデザイン

HTML

<div class="demo-container">
  <label class="neo-checkbox">
    <input type="checkbox" class="neo-input">
    <span class="neo-box">
      <i class="neo-icon"></i>
    </span>
    <span class="neo-label">デザインに同意する</span>
  </label>
</div>

CSS

/* デモ用のコンテナ - 中央配置 */
.demo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 20px 0;
}

/* 背景色の設定 */
body {
  background-color: #e0e5ec;
}

/* ラベルのスタイル */
.neo-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 10px;
}

/* デフォルトチェックボックスを非表示 */
.neo-input {
  display: none;
}

/* ネオモーフィズムボックス */
.neo-box {
  position: relative;
  width: 28px;
  height: 28px;
  background: #e0e5ec;
  border-radius: 8px;
  box-shadow: 
    6px 6px 12px #bec3c9,
    -6px -6px 12px #ffffff;
  transition: all 0.3s ease;
}

/* チェックアイコン */
.neo-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: all 0.3s ease;
}

.neo-icon::before {
  content: '✓';
  font-size: 16px;
  font-weight: bold;
  color: #6366f1;
}

/* チェック時のスタイル */
.neo-input:checked ~ .neo-box {
  box-shadow: 
    inset 3px 3px 6px #bec3c9,
    inset -3px -3px 6px #ffffff;
}

.neo-input:checked ~ .neo-box .neo-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ホバー時のスタイル */
.neo-checkbox:hover .neo-box {
  box-shadow: 
    4px 4px 8px #bec3c9,
    -4px -4px 8px #ffffff;
}

/* ラベルのスタイル */
.neo-label {
  font-size: 16px;
  color: #64748b;
}

5. リング型チェックボックス

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

特徴

• リング状のエレガントなデザイン
• チェック時に塗りつぶしアニメーション
• 高級感のある見た目

HTML

<div class="demo-container">
  <label class="ring-checkbox">
    <input type="checkbox" class="ring-input">
    <span class="ring-box">
      <span class="ring-inner"></span>
    </span>
    <span class="ring-label">プレミアムプランに加入</span>
  </label>
</div>

CSS

/* デモ用のコンテナ - 中央配置 */
.demo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 20px 0;
}

/* ラベルのスタイル */
.ring-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

/* デフォルトチェックボックスを非表示 */
.ring-input {
  display: none;
}

/* リング外枠 */
.ring-box {
  position: relative;
  width: 24px;
  height: 24px;
  border: 3px solid #d4d4d8;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* リング内側 */
.ring-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: #8b5cf6;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* チェック時のスタイル */
.ring-input:checked ~ .ring-box {
  border-color: #8b5cf6;
}

.ring-input:checked ~ .ring-box .ring-inner {
  width: 12px;
  height: 12px;
}

/* ホバー時のスタイル */
.ring-checkbox:hover .ring-box {
  border-color: #a78bfa;
  transform: scale(1.1);
}

/* フォーカス時のスタイル */
.ring-input:focus ~ .ring-box {
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
}

/* ラベルのスタイル */
.ring-label {
  font-size: 16px;
  color: #4b5563;
  font-weight: 500;
}

6. バウンスアニメーションチェックボックス

See the Pen 6. バウンスアニメーションチェックボックス by ryoma (@hwjgdjpk-the-decoder) on CodePen.

特徴

• チェック時に弾むアニメーション
• 楽しくインタラクティブ
• ユーザーの操作感を向上

HTML

<div class="demo-container">
  <label class="bounce-checkbox">
    <input type="checkbox" class="bounce-input">
    <span class="bounce-box">
      <svg class="bounce-svg" viewBox="0 0 24 24">
        <path class="bounce-check" d="M4.5 12.5l5 5 10-10"></path>
      </svg>
    </span>
    <span class="bounce-label">アニメーションを有効にする</span>
  </label>
</div>

CSS

/* デモ用のコンテナ - 中央配置 */
.demo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 20px 0;
}

/* ラベルのスタイル */
.bounce-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* デフォルトチェックボックスを非表示 */
.bounce-input {
  display: none;
}

/* チェックボックスの外枠 */
.bounce-box {
  position: relative;
  width: 26px;
  height: 26px;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  background-color: white;
  transition: all 0.2s ease;
}

/* SVGのスタイル */
.bounce-svg {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
}

/* チェックマークのパス */
.bounce-check {
  fill: none;
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.3s ease;
}

/* チェック時のスタイル */
.bounce-input:checked ~ .bounce-box {
  background-color: #22c55e;
  border-color: #22c55e;
  animation: bounce 0.4s ease;
}

.bounce-input:checked ~ .bounce-box .bounce-check {
  stroke-dashoffset: 0;
}

/* バウンスアニメーション */
@keyframes bounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.9); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ホバー時のスタイル */
.bounce-checkbox:hover .bounce-box {
  border-color: #22c55e;
}

/* ラベルのスタイル */
.bounce-label {
  font-size: 16px;
  color: #475569;
}

7. フリップカード型チェックボックス

See the Pen 7. フリップカード型チェックボックス by ryoma (@hwjgdjpk-the-decoder) on CodePen.

特徴

• 3Dフリップアニメーション
• 表裏で異なるアイコン表示
• インパクトのあるデザイン

HTML

<div class="demo-container">
  <label class="flip-checkbox">
    <input type="checkbox" class="flip-input">
    <span class="flip-card">
      <span class="flip-front">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <rect x="3" y="3" width="18" height="18" rx="2" stroke-width="2"></rect>
        </svg>
      </span>
      <span class="flip-back">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <rect x="3" y="3" width="18" height="18" rx="2" fill="currentColor" stroke-width="2"></rect>
          <path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
    </span>
    <span class="flip-label">3D効果を体験する</span>
  </label>
</div>

CSS

/* デモ用のコンテナ - 中央配置 */
.demo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 20px 0;
}

/* ラベルのスタイル */
.flip-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  perspective: 1000px;
}

/* デフォルトチェックボックスを非表示 */
.flip-input {
  display: none;
}

/* フリップカードのコンテナ */
.flip-card {
  position: relative;
  width: 28px;
  height: 28px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

/* カードの共通スタイル */
.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* フロント面 */
.flip-front {
  color: #94a3b8;
}

/* バック面 */
.flip-back {
  color: #3b82f6;
  transform: rotateY(180deg);
}

/* SVGのスタイル */
.flip-card svg {
  width: 24px;
  height: 24px;
}

/* チェック時のスタイル */
.flip-input:checked ~ .flip-card {
  transform: rotateY(180deg);
}

/* ホバー時のスタイル */
.flip-checkbox:hover .flip-card {
  transform: scale(1.05);
}

.flip-input:checked ~ .flip-card:hover {
  transform: rotateY(180deg) scale(1.05);
}

/* ラベルのスタイル */
.flip-label {
  font-size: 16px;
  color: #475569;
}

8. パルスエフェクトチェックボックス

See the Pen 8. パルスエフェクトチェックボックス by ryoma (@hwjgdjpk-the-decoder) on CodePen.

特徴

• チェック時に波紋が広がるエフェクト
• マテリアルデザイン風
• 視覚的フィードバックが明確

HTML

<div class="demo-container">
  <label class="pulse-checkbox">
    <input type="checkbox" class="pulse-input">
    <span class="pulse-box">
      <span class="pulse-ripple"></span>
      <svg class="pulse-icon" viewBox="0 0 24 24">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </span>
    <span class="pulse-label">通知設定を有効にする</span>
  </label>
</div>

CSS

/* デモ用のコンテナ - 中央配置 */
.demo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 20px 0;
}

/* ラベルのスタイル */
.pulse-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

/* デフォルトチェックボックスを非表示 */
.pulse-input {
  display: none;
}

/* チェックボックスの外枠 */
.pulse-box {
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  background-color: white;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* パルスエフェクト */
.pulse-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(59, 130, 246, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

/* チェックアイコン */
.pulse-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pulse-icon polyline {
  fill: none;
  stroke: white;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* チェック時のスタイル */
.pulse-input:checked ~ .pulse-box {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.pulse-input:checked ~ .pulse-box .pulse-ripple {
  width: 50px;
  height: 50px;
  opacity: 0;
  transition: width 0.6s, height 0.6s, opacity 0.6s;
}

.pulse-input:checked ~ .pulse-box .pulse-icon {
  opacity: 1;
  animation: checkmark 0.3s ease-in-out;
}

/* チェックマークアニメーション */
@keyframes checkmark {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ホバー時のスタイル */
.pulse-checkbox:hover .pulse-box {
  border-color: #3b82f6;
}

/* ラベルのスタイル */
.pulse-label {
  font-size: 16px;
  color: #475569;
}

まとめ

今回はCSSだけで作れるおしゃれなチェックボックスのデザインを8個ご紹介しました。

どれもコピペするだけで使えるので、プロジェクトに合わせて選んでみてください。